Form Validation Using jQuery and Regular Expressions
Regular expressions offer an extremely flexible and powerful way of adding validation to your website forms. Combined with jQuery, it allows you to ensure that data sent to the server matches all of your requirements.
In this post I have included several example regular expressions that we have used in our web design projects for validating form input.
For this tutorial we assume you know how to create the HTML form and add jQuery to your site. For samples you can refer to previous posts – check passwords using jQuery, email validation using jQuery or view the demo form.
1 – Validates Numeric Characters Only
Accepts only 0 – 9
$('#TxtUpdateTime').keyup(function () {
var val = $(this).val();
var orignalValue = val;
val = val.replace(/[0-9]*/g, "");
if (val != '') {
orignalValue = orignalValue.replace(/([^0-9].*)/g, "")
$(this).val(orignalValue);
}
});
2 - No Special Characters
Allows only letters, numbers and spaces. All other characters will return an error.
$('.keyup-characters').keyup(function() {
$('span.error-keyup-2').remove();
var inputVal = $(this).val();
var characterReg = /^\s*[a-zA-Z0-9,\s]+\s*$/;
if(!characterReg.test(inputVal)) {
$(this).after('<span class="error error-keyup-2">No special characters allowed.</span>');
}
});
3 – Maximum Of 8 Characters
Allows all characters up to a maximum of 8. Useful for passwords, etc. The value can easily be increased/descreased by changing the {0,8}
$('.keyup-limit-8').keyup(function() {
$('span.error-keyup-3').remove();
var inputVal = $(this).val();
var characterReg = /^([a-zA-Z0-9]{0,8})$/;
if(!characterReg.test(inputVal)) {
$(this).after('<span class="error error-keyup-3">Maximum 8 characters.</span>');
}
});
4 - Check Email Address Format
This is a standard regular expression, which is used to validate email addresses to ensure they follow the standard format:
$('.keyup-email').keyup(function() {
$('span.error-keyup-7').remove();
var inputVal = $(this).val();
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(inputVal)) {
$(this).after('<span class="error error-keyup-7">Invalid Email Format.</span>');
}
});
4 - Regex for float numbers
/^[-+]?[0-9]*\.?[0-9]+$/
In this post I have included several example regular expressions that we have used in our web design projects for validating form input.
For this tutorial we assume you know how to create the HTML form and add jQuery to your site. For samples you can refer to previous posts – check passwords using jQuery, email validation using jQuery or view the demo form.
1 – Validates Numeric Characters Only
Accepts only 0 – 9
$('#TxtUpdateTime').keyup(function () {
var val = $(this).val();
var orignalValue = val;
val = val.replace(/[0-9]*/g, "");
if (val != '') {
orignalValue = orignalValue.replace(/([^0-9].*)/g, "")
$(this).val(orignalValue);
}
});
2 - No Special Characters
Allows only letters, numbers and spaces. All other characters will return an error.
$('.keyup-characters').keyup(function() {
$('span.error-keyup-2').remove();
var inputVal = $(this).val();
var characterReg = /^\s*[a-zA-Z0-9,\s]+\s*$/;
if(!characterReg.test(inputVal)) {
$(this).after('<span class="error error-keyup-2">No special characters allowed.</span>');
}
});
3 – Maximum Of 8 Characters
Allows all characters up to a maximum of 8. Useful for passwords, etc. The value can easily be increased/descreased by changing the {0,8}
$('.keyup-limit-8').keyup(function() {
$('span.error-keyup-3').remove();
var inputVal = $(this).val();
var characterReg = /^([a-zA-Z0-9]{0,8})$/;
if(!characterReg.test(inputVal)) {
$(this).after('<span class="error error-keyup-3">Maximum 8 characters.</span>');
}
});
4 - Check Email Address Format
This is a standard regular expression, which is used to validate email addresses to ensure they follow the standard format:
$('.keyup-email').keyup(function() {
$('span.error-keyup-7').remove();
var inputVal = $(this).val();
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(inputVal)) {
$(this).after('<span class="error error-keyup-7">Invalid Email Format.</span>');
}
});
4 - Regex for float numbers
/^[-+]?[0-9]*\.?[0-9]+$/
No comments:
Post a Comment