RK1 Web Designs - Tutorial - Image gallery using Javascript

Form validation JavaScript 01.

This tutorial is going to help with basic form validation and instead of using the alert box to explain the error, we are going to write in to the document and highlight the field with the error.

<!—html elements-->
<body onload="initForm();">//body element call function in onload event
<p id="ErrorM"></p>//this is where your error will be displayed
<form action="#" method="post" id="rk_contact" onsubmit="return checkForm(this);">//checkform() is called onsubmit – (this) gets the form element details for function
<p><label>* Your Full Name:</label>
<input type="text" name="fullName" size="30" value="" onblur="vname(this);" /></p>//!important make sure you surround your text and text box with a block element e.g. p
<p><input class="sender" type="submit" name="Send" value="Send Message" /></p>
</form>
/***********CSS*******/
#ErrorM{
	display:none;//hide the error message box
	color:#CC0000;
	font-weight:bold;
}
/*******javascript******/
var errName ="The Name you have entered is not long enough or has a number.";//error message
var errorDisplay //make variable scope global
function initForm(){
	errorDisplay = document.getElementById('ErrorM');//Important using DOM find the id of error display message using onload event handler
};
//Regular Expression will be explained in another tutorial, so do worry too much about it.
function vname(value){//parameter which gets form element details
	CheckText = /^(\w{3}\w*)\s?\w*$///Regular expression – makes sure at least 3 characters are entered for first name and surname is entered
	CheckText2 = /^\D+$///no digits in the name field
	if((CheckText.test(value.value)) && (CheckText2.test(value.value))){ //test sting using reg exp. This is if true so string input is correct.
		errorDisplay.style.display = "none";
		value.parentNode.style.backgroundColor = "#FFFFFF";
		return true;
	}else{//This is if false so error message pops up and highlight textbox
		errorDisplay.style.display = "block";
		errorDisplay.innerHTML = errName;
		value.parentNode.style.backgroundColor = "#CC0000";
		return false;
	}
}
//use this function for onsubmit – calls vname function and tests if statement is false, if so stops the form from sending.
function checkForm(myForm) {
	if(!vname(myForm.fullName)){
		myForm.fullName.focus();
		return false;
	}
}

Code explained.

errorDisplay.style.display = "none";
This line formats the display of the error message display. In this case is hidden from the users view. Change “none” to “block” will make it visible.
errorDisplay.innerHTML = errName;
This writes the error message to the error element.
value.parentNode.style.backgroundColor = "#CC0000";
What this line of code does, takes the parameter “value”, which refers to the form element. The parentNode looks at the containing element of the text box, which is the p element. It then changes the background colour of that element.
return false;
Prevents the form from been sent.

« Back to web creator tutorials

Dynamic interaction

Make a image gallery Improve your image gallery Form Validation