Mostly each and every project has a smaller or a bigger form to be filled by the user and we need to validate the form fields on the client side.
Here is a summed up function, where we can add the following classes for specific validations and pass the form to this function for validation and proper error classes will be added to those fields. We can customise this according to the project.
This help us to be saved from adding form specific validation functions. Just add few more function as per requirment if new type of validations are required.
Classes can be added as in following:
For required fields (input,select) :- “requiredField” For number fields:- “numberField” For emails :- “emailIDField” For passowrds:- “passwordField” For phone numbers:- “phNumberField” For Zip field :- “zipField” For SSN Field:- “SSNField” For date :- “dateField” For file Extension:- “checkFileExtension”
For file name check :- “fileNameValid”
The function uses regex expressions for validations. These expressions can be changed as per the requirment of validations.
CSS to be added:
//Customize as required
.errorMessageText{
color: #F28416;
text-align:right;
padding-top:10px;
font-weight: bold;
}
.errorField{
border-color: #FF8300;
outline: 0px none;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(255, 131, 0, 0.6);
}
JS to be added:-
/* Combined function for form fields validations */
function validateFormFields(formID){
var allCorrect = true;
var fileExt = true;
$('.errorField').removeClass('errorField');
$('.errorMessageText').remove();
formID = '#'+formID;
/* Check whether all the required fields are filled or not */
$(formID+' input.requiredField').each(function(){
if($.trim($(this).val())==""){
allCorrect = false;
$(this).addClass('errorField');
$(this).after("
Can not be left Blank.");
}
});
$(formID+' select.requiredField').each(function(){
if($.trim($(this).val())==""){
allCorrect = false;
$(this).addClass('errorField');
$(this).after("
Can not be left Blank.");
}
});
/* Check if the number fields have valid number or not */
$(formID+' input.numberField').each(function(){
if (!($.trim($(this).val()) == "")) {
var num = $.trim($(this).val());
if (!(num.match(/^[0-9]+$/))) {
allCorrect = false;
$(this).addClass('errorField');
$(this).after("
Should be only numbers.");
}
}
});
/* Validate each email in a comma seperated list or i*/
$(formID + ' input.emailIDField').each(function(){
if (!($.trim($(this).val()) == "")) {
var emailList = $(this).toString().split(",");
for (var i = 0; i < emailList.length; i++) {
emailList[i] = emailList[i].trim();
if (!($.trim(emailList[i]) == "")) {
if (!(emailList[i].match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/))) {
allCorrect = false;
$(this).addClass('errorField');
$(this).after("
Invalid Email");
}
}
}
}
});
/* validate Password */
$(formID + ' input.passwordField').each(function(){
if (!($.trim($(this).val()) == "")) {
var password = $.trim($(this).val());
if(!(password.match(/^(?=^.{8,20}$)(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%_^&*()])(?!.*\s)[0-9a-zA-Z!@#$%_^&*()]*$/))) {
allCorrect = false;
$(this).addClass('errorField');
$(this).after("
Invalid Password");
}
}
});
/* Validate Phone Number */
$(formID + ' input.phNumberField').each(function(){
if (!($.trim($(this).val()) == "")) {
var phnum = $.trim($(this).val());
var trimNum = phnum.replace(/-/g, ""); //Replaces all -
if (trimNum.length != 10) {
allCorrect = false;
$(this).addClass('errorField');
$(this).after("
Invalid Phone Number");
}
else
if (!(trimNum.match(/^[0-9]+$/))) {
allCorrect = false;
$(this).addClass('errorField');
$(this).after("
Invalid Phone Number");
}
}
});
/* Validate Zip */
$(formID + ' input.zipField').each(function(){
if (!($.trim($(this).val()) == "")) {
var zip = $.trim($(this).val());
if (zip.length != 5) {
allCorrect = false;
$(this).addClass('errorField');
$(this).after("
Invalid Zip");
}
else
if (!(zip.match(/^[0-9]+$/))) {
allCorrect = false;
$(this).addClass('errorField');
$(this).after("
Invalid Zip");
}
}
});
/* Validate SSN */
$(formID + ' input.SSNField').each(function(){
if (!($.trim($(this).val()) == "")) {
var SSN = $.trim($(this).val());
var trimSSN = SSN.replace(/-/g, ""); //Replaces all -
if (trimSSN.length != 9) {
allCorrect = false;
$(this).addClass('errorField');
$(this).after("
Invalid SSN");
}
else
if (!(trimSSN.match(/^[0-9]+$/))) {
allCorrect = false;
$(this).addClass('errorField');
$(this).after("
Invalid SSN");
}
}
});
/* Validate Date field */
$(formID + ' input.dateField').each(function(){
if (!($.trim($(this).val()) == "")) {
var date = $.trim($(this).val());
var trimDate = date.replace(/\//g, ""); //Replaces all -
if (trimDate.length != 8) {
allCorrect = false;
$(this).addClass('errorField');
$(this).after("
Invalid Date");
}
else
if (!(trimDate.match(/^[0-9]+$/))) {
allCorrect = false;
$(this).addClass('errorField');
$(this).after("
Invalid Date");
}
else {
var dateD = trimDate.substr(2, 2);
var dateM = trimDate.substr(0, 2);
var dateY = trimDate.substr(4, 4);
if (dateD < 1 || dateD > 31 || dateM < 1 || dateM > 12 || dateY < 1900) {
allCorrect = false;
$(this).addClass('errorField');
$(this).after("
Invalid Date");
}
else
if ((dateM == 4 || dateM == 6 || dateM == 9 || dateM == 11) && dateM == 31) {
allCorrect = false;
$(this).addClass('errorField');
$(this).after("
Invalid Date");
}
else
if (dateM == 2) {
var isleap = dateY % 4 == 0 && (dateY % 100 != 0 || dateY % 400 == 0);
if (dateD > 29 || (dateD == 29 && !isLeap)) {
allCorrect = false;
$(this).addClass('errorField');
$(this).after("
Invalid Date");
}
}
}
}
});
/* Check if the file has correct extension */
$(formID+' input.checkFileExtension').each(function(){
if (!($.trim($(this).val()) == "")) {
var ext = $(this).val().toString().split('.').pop().toLowerCase();
if($.inArray(ext, ['tif','pdf','zip']) == -1) {
allCorrect = false;
fileExt = false;
$(this).addClass('errorField');
$(this).after("
Upload only .pdf, .tif or .zip files.");
}
}
});
if (fileExt) {
/* Check if the filename is according to the standards */
$(formID + ' input.fileNameValid').each(function(){
if (!($.trim($(this).val()) == "")) {
var fileName = $.trim($(this).val());
var n = fileName.lastIndexOf('\\');
fileName = fileName.substr(n + 1);
fileName = fileName.substr(0, fileName.lastIndexOf('.'));
if (!(fileName.match(/^[a-zA-Z0-9_]*$/))) {
allCorrect = false;
$(this).addClass('errorField');
$(this).after("
Invalid File Name");
}
}
});
}
return allCorrect;
}
The function may be lengthy , but is handy when you have multiple forms in your project.