jQuery Form Validation

Want to validate an HTML form the fast way (in the browser), plus get some cool jQuery on? Here is some code to handle that. (Remember, since people can turn off Javascript, don't forget to validate the data on the server as well.)

Demo

Leave fields blank, then tab or submit, to see the validation in action.




Installation

  1. Include jquery.js.
  2. (HTML) In the form tag, include onSubmit="return checkForm(this);".
  3. (HTML) In the validated input tag, include onblur="checkField(this);".
  4. (HTML) Give your fields ID's. Use these to identify your fields in the Javascript select/case code.
  5. (Javascript) Update the checkFieldTask() function with your fields.
  6. (Javascript) Set demo_mode=false.

HTML

	<p id="instructions">Leave fields blank, then tab or submit, for error.</p>
	
	<form action="#" method="post" name="myform" id="myform" onSubmit="return checkForm(this);">

	
		<label for="field1">Field 1</label>
		<input name="field1" id="field1" type="text" value="" onblur="checkField(this);" /><br />

	
		<label for="field2">Field 2</label>
		<input name="field2" id="field2" type="text" value="" onblur="checkField(this);" /><br />

		<br /><input name="subbtn" id="subbtn" type="submit" value="Submit Form" />

	
	</form>

Javascript

var demo_mode = true; // set to false to allow form submit

function checkFieldTask (aFieldName) {
	var bool = true;
	switch (aFieldName) {
		/*
			checkFieldTask() customization instructions:
			
			1. Make a new "case" entry for each of the fields you want to validate.
			2. Put your validation test for the field inside of the "if" statement.
			3. Call "failField" when the test fails, passing in the error message that should appear.
			4. Set "bool=false" when the test fails.
			5. Call "passField" when the test succeeds.
		*/
		case "field1":
			if ($("#"+aFieldName).val()=="") {
				failField(aFieldName,"Error message for Field 1.");
				bool = false;
			} else {
				passField(aFieldName);
			}
			break;
		case "field2":
			if ($("#"+aFieldName).val()=="") {
				failField(aFieldName,"Error message for Field 2.");
				bool = false;
			} else {
				passField(aFieldName);
			}
			break;
	}
	return bool;
}
function checkField (aField) {
	return checkFieldTask(aField.name);
}
function checkForm (aForm) {
	var bool = true;
	for (var i=0; i < aForm.elements.length; i++) {
		if (!checkFieldTask(aForm.elements[i].name)) {
			bool = false;
		}
	}
	if (bool) {
		passField("subbtn");
		if (demo_mode) {
			$("#myform").hide(250);
			$("#instructions").html('Good job. <a href="#" onclick="demoShowForm();return false;">Show Form Again</a>');
			return false;
		}
	} else {
		failField("subbtn","Please resolve issues first.");
	}
	return bool;
}
function passField (aFieldName) {
	$("#form_alert_"+aFieldName+"_msg").remove();
}
function failField (aFieldName,msg) {
	$("#form_alert_"+aFieldName+"_msg").remove(); // in case there are any from last time
	$("#"+aFieldName).after(alertMsgHTML(aFieldName,msg));
}
function alertMsgHTML (aFieldName, msg) {
	return '<div id="form_alert_'+aFieldName+'_msg" class="form_alert_msg">'+msg+'</div>';
}
function demoShowForm () {
	$("#instructions").text("Leave fields blank, then tab or submit, for error.");
	$("#myform").show(250);
}
$(document).ready(function(){
   document.myform.field1.focus();
});

CSS

.form_alert_msg {
	font-size: 14px;
	font-weight: bold;
	color: #990000;
	display:inline;
	background-color: #FFFFCC;
	padding: 2px 5px;
	margin-left: 5px;
	border-top: 1px solid #990000;
	border-right: 2px solid #990000;
	border-bottom: 1px solid #990000;
	border-left: 2px solid #990000;
}

Along these lines, also see:

© 2011