<!DOCTYPE html>
<html>
<head>
<title>Client-Side Validation</title>
</head>
<body>
<form>
<ul id="errors" style="display: none ;">
<!-- Errors go here. --->
</ul>
Name: <input type="text" name="name" /><br />
Email: <input type="text" name="email" /><br />
Birthday: <input type="text" name="birthday" /><br />
<input type="submit" value="Submit" />
</form>
<script type="text/javascript" src="../jquery-1.7.js"></script>
<script type="text/javascript">
// Bind to the form submission.
$( "form" ).submit(
function( event ){
// Get the form being submitted.
var form = $( this );
// Get the errors collection.
var errorsList = $( "#errors" )
.empty()
;
// Validate the name.
if (isEmpty( form, "name" )){
errorsList.append(
"<li>Please enter your name.</li>"
);
}
// Validate the email.
if (isEmpty( form, "email" )){
errorsList.append(
"<li>Please enter a valid email.</li>"
);
}
// Validate the birthday.
if (isEmpty( form, "birthday" )){
errorsList.append(
"<li>Please enter a valid birthday.</li>"
);
}
// Check to see if we have any errors.
if (errorsList.children().length){
// Show the errors.
errorsList.show();
// Cancel the form submission.
event.preventDefault();
}
}
);
// I check to see if the given field is empty.
function isEmpty( form, fieldName ){
// Return true if the field is empty.
return( form.find( "input[ name = '" + fieldName + "' ]" ).val() === "" );
}
</script>
</body>
</html>