It is very simple to validate your page elements which you want in jQuery. You have to only check the value of element if it is empty show a message to user.
In below example I have used add a "req" class to each element which I want to validate. After button click I have called ValidateForm method and pass the div which contain email and password textbox. ValidateForm method checks each element which has "req" class. If element is empty this method return an alert message and focus the element and return false.
CODE
<!DOCTYPE html>
<html>
<head>
<title>jQuery With Example</title>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.btnLogin').click(function (event) {
if (ValidateForm($(this).closest('div'))) {
alert("You can login");
}
});
});
function ValidateForm(page) {
var isValid = true;
page.find('.req').each(function () {
$(this).val($.trim($(this).val()));
});
page.find('.req').each(function () {
if (isValid) {
if ($(this).attr('type') == 'text' || $(this).attr('type') == 'password') {
if ($(this).val() == '') {
alert('Please enter ' + $(this).attr('title'));
$(this).focus();
isValid = false;
return;
}
}
if (this.nodeName.toLowerCase() == 'textarea') {
if ($(this).val() == '') {
alert('Please enter ' + $(this).attr('title'));
$(this).focus();
isValid = false;
return;
}
}
if (this.nodeName.toLowerCase() == 'select') {
if ($(this).find('option:selected') == undefined || $(this).find('option:selected').val() == "0") {
alert('Please select ' + $(this).attr('title'));
$(this).focus();
isValid = false;
return;
}
}
if ($(this).is('.email')) {
if ($(this).val() != '') {
if (isValidEmailAddress($(this).val()) == false) {
alert('Invalid email id entered on ' + $(this).attr('title'));
$(this).focus();
isValid = false;
return;
}
}
}
}
});
return isValid;
}
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^(("[\w-+\s]+")|([\w-+]+(?:\.[\w-+]+)*)|("[\w-+\s]+")([\w-+]+(?:\.[\w-+]+)*))(@((?:[\w-+]+\.)*\w[\w-+]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
return pattern.test(emailAddress);
}
</script>
</head>
<body>
<div>
Email: <input type="text" class="txtEmail email req" title="Email" /><br /><br />
Password: <input type="password" class="txtPassword req" title="Password" /><br /><br />
<input type="button" class="btnLogin Button" value="Login" />
</div>
</body>
</html>
DISPLAY
Email:
Password:
Password:
No comments :
Please Give Your Feedback