Validation
Validation using jquery
HTML
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<h1>Form Validation Example</h1>
<form id='registerForm' name='registerForm' method='post' action=''>
<p>
account:
<input type='text' name='account' id='account' class='accountNumber' />
</p>
<p>
</p>
</form>
CSS
.error {
font: normal 10px arial;
padding: 3px;
margin: 3px;
background-color: #ffc;
border: 1px solid #c00;
}
body {
font-size: x-large;
background: #CCC;
}
h1 {
margin-bottom: 20px;
}
form {
padding: 50px;
}
JavaScript
$(document).ready(function() {
$("#registerForm").validate({
submitHandler: function(form) {
console.log("Submitted!");
},
invalidHandler: function(event, validator) {
// 'this' refers to the form
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You missed ' + errors + ' fields. They have been highlighted';
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
},
rules: {
account: {
required: true,
minlength: 6,
maxlength: 15,
digits: true
},
companyNumber: {
required: true,
digits: true
}
}
});
});
$.validator.addMethod('accountNumber', function (value) {
return !(/^0{8}$/.test(value));
}, 'Please entera valid account.');