Login   Register  
PHP Classes
elePHPant
Icontem

File: validation.js

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Larry Wakeman  >  Larrys Form Generation  >  validation.js  >  Download  
File: validation.js
Role: Auxiliary data
Content type: text/plain
Description: Validation jQuery class
Class: Larrys Form Generation
Create HTML forms using jQuery for validation
Author: By
Last change: Fixed a bug with date validation
modified to run in jQuery no conflict mode
Date: 2012-05-17 16:18
Size: 19,773 bytes
 

Contents

Class file image Download
/**
** Copyright © Larry Wakeman - 2012
**
** All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, 
** or transmitted in any form or by any means without the prior written permission of the copyright
** owner and must contain the avove copyright notice.
**
** This script is licensed nder the GPL license..
*/
/*
    This script can be used to validate a form or a control.
          
    This script requires jQuery.
    
    To load this script, use the following:

        <script language="JavaScript" src="validation.js"></script>
        <script language="JavaScript">
            var valid = new validate();
        </script>
    
    The form definitions should be as follows:
    
        <form method="POST" action="targetPage" name="FormName" id="FormName" onsubmit="return valid.validateForm(this);">
    
    Items to be validated should be described as follows:
        
        <label for="FacilityState">Facility State</label>
        <input type="text" name="FacilityState" id="FacilityState" class="a list of validations and other classes" size="3" onchange="javascript: valid.validateInput(this);">
        <div id="FacilityStateError" class="validationError" style="display:none;"></div>
    
You might be able to use onblur events but if you display a popup, that gets to be problematic and by default, this script creates a popup.

You can also put a div as follows on your page to display any validation errors from the form:

        <div id="ValidationError" class="validationError" style="display: none;"></div>

Valid validations are:
    
        required
        email
        date - in dd-mon-yyyy,  dd-mm-yyyy, yyyy-mon-dd or yyyy-mm-dd formats
        time
        currency
        numeric
        alphanumeric
        alpha
        phone
        state
        zipcode
        urlentry
        
Valid controls are:

        text
        testarea
        select - Required only, value not '' or 0
        radio buttons - one must be checked
        
*/

function validate() {

/**
 * Method to setup to validate an input
 */
    this.validateInput = function(ctrl) {
        this.lastChecked = '';
        var id = (jQuery(ctrl).attr('id'));
        jQuery('validationError').hide();
        jQuery('validationError').html('');
        return this.checkInput(ctrl);
    };
    
/**
 * Method to validate an input
 */
    this.checkInput = function (ctrl) {
        var valid =true;
        var id = (jQuery(ctrl).attr('id'));
        if (jQuery(ctrl).attr('name') != this.lastChecked) {
            jQuery('#' + id + 'Error').hide();
            jQuery('#' + id + 'Error').html('');
        }
        var label = jQuery('label[for="' + id + '"]').text();
        if (jQuery(ctrl).hasClass('required')) {
            if (!this.isRequired(ctrl)) {
                jQuery('#' + id + 'Error').html(jQuery('#' + id + 'Error').html() + 'This field is required<br>');
                jQuery('#' + id + 'Error').show();
                jQuery('#validationError').html(jQuery('#validationError').html() + label + ' is required<br>');
                jQuery('#validationError').show();
                return false;
            }
        }
        if (jQuery(ctrl).hasClass('email')) {
            if (!this.isEmail(ctrl)) {
                jQuery('#' + id + 'Error').html(jQuery('#' + id + 'Error').html() + 'Invalid email address.<br>');
                jQuery('#' + id + 'Error').show();
                jQuery('#validationError').html(jQuery('#validationError').html() + label + ' has an invalid email address.<br>');
                valid = false;
            }
        }
        if (jQuery(ctrl).hasClass('date')) {
            if (!this.isDate(ctrl)) {
               jQuery('#' + id + 'Error').html(jQuery('#' + id + 'Error').html() + 'Invalid date.<br>');
                jQuery('#' + id + 'Error').show();
                jQuery('#validationError').html(jQuery('#validationError').html() + label + ' is an invalid date.<br>');
                valid = false;
            }
        }
        if (jQuery(ctrl).hasClass('time')) {
            if (!this.isTime(ctrl)) {
                jQuery('#' + id + 'Error').html(jQuery('#' + id + 'Error').html() + 'Invalid time.<br>');
                jQuery('#' + id + 'Error').show();
                jQuery('#validationError').html(jQuery('#validationError').html() + label + ' is an invalid time.<br>');
                valid = false;
            }
        }
        if (jQuery(ctrl).hasClass('currency')) {
            if (!this.isCurrency(ctrl)) {
                jQuery('#' + id + 'Error').html(jQuery('#' + id + 'Error').html() + 'Invalid currency.<br>');
                jQuery('#' + id + 'Error').show();
                jQuery('#validationError').html(jQuery('#validationError').html() + label + ' is an invalid currency.<br>');
                valid = false;
            }
        }
        if (jQuery(ctrl).hasClass('numeric')) {
            if (!this.isNumeric(ctrl)) {
                jQuery('#' + id + 'Error').html(jQuery('#' + id + 'Error').html() + 'Non numeric value<br>');
                jQuery('#' + id + 'Error').show();
                jQuery('#validationError').html(jQuery('#validationError').html() + label + ' is a non numeric value.<br>');
                valid = false;
            }
        }
        if (jQuery(ctrl).hasClass('alphanumeric')) {
            if (!this.isAlphaNumeric(ctrl)) {
                jQuery('#' + id + 'Error').html(jQuery('#' + id + 'Error').html() + 'Non alpha-numeric value<br>');
                jQuery('#' + id + 'Error').show();
                jQuery('#validationError').html(jQuery('#validationError').html() + label + ' is a non alpha-numeric value.<br>');
                valid = false;
            }
        }
        if (jQuery(ctrl).hasClass('alpha')) {
            if (!this.isAlpha(ctrl)) {
                jQuery('#' + id + 'Error').html(jQuery('#' + id + 'Error').html() + 'Non alphabetic value<br>');
                jQuery('#' + id + 'Error').show();
                jQuery('#validationError').html(jQuery('#validationError').html() + label + ' is a non alphabetic value.<br>');
                valid = false;
            }
        }
        if (jQuery(ctrl).hasClass('phone')) {
           if (!this.isPhone(ctrl)) {
                jQuery('#' + id + 'Error').html(jQuery('#' + id + 'Error').html() + 'Invalid phone number<br>');
                jQuery('#' + id + 'Error').show();
                jQuery('#validationError').html(jQuery('#validationError').html() + label + ' is as invalid phone number.<br>');
                valid = false;
            }
        }
        if (jQuery(ctrl).hasClass('state')) {
           if (!this.isState(ctrl)) {
                jQuery('#' + id + 'Error').html(jQuery('#' + id + 'Error').html() + 'Invalid State<br>');
                jQuery('#' + id + 'Error').show();
                jQuery('#validationError').html(jQuery('#validationError').html() + label + ' is as invalid State.<br>');
                valid = false;
            }
        }
        if (jQuery(ctrl).hasClass('zipcode')) {
           if (!this.isZipcode(ctrl)) {
                jQuery('#' + id + 'Error').html(jQuery('#' + id + 'Error').html() + 'Invalid Zip Code<br>');
                jQuery('#' + id + 'Error').show();
                jQuery('#validationError').html(jQuery('#validationError').html() + label + ' is as invalid Zip Code.<br>');
                valid = false;
            }
        }
        if (jQuery(ctrl).hasClass('urlentry')) {
            if (!this.isInternetURL(ctrl)) {
                jQuery('#' + id + 'Error').html(jQuery('#' + id + 'Error').html() + 'Invalid URL<br>');
                jQuery('#' + id + 'Error').show();
                jQuery('#validationError').html(jQuery('#validationError').html() + label + ' is as invalid URL.<br>');
                valid = false;
            }
        }
        if (!valid) jQuery('#' + id + 'Error').show();
        return valid;
    };
    
/**
 * Method to find all the descendants of a form that can be validated
 */
    this.checkChild  = function (ctrl) {
        var children = jQuery(ctrl).children();
        var valid =true;
        for (var i = 0; i < children.size(); i++) {
            if (jQuery(children[i]).is('input') ||jQuery(children[i]).is('textarea') ||jQuery(children[i]).is('select') || jQuery(children[i]).is('input:radio')) {
                valid = valid & this.checkInput(jQuery(children[i]));
            } else {
                valid = valid & this.checkChild(children[i]);
            }
        }
        return valid;
    };

/**
 * Method to validate a form
 */
    this.validateForm = function(ctrl) {
        this.lastChecked = '';
        jQuery('.validationError').html('');
        if (this.checkChild(ctrl)) return true;
        jQuery('#validationError').show();
        return false;
    };
    
/**
 * Method to check that required field is not empty
 */
    this.lastChecked = '';
    
     this.isRequired = function (ctrl) {
        if (jQuery(ctrl).is('input:radio')) {
            if (this.lastChecked != jQuery(ctrl).attr('name')) {
                this.lastChecked = jQuery(ctrl).attr('name');
                if (!jQuery("input[@name='" + jQuery(ctrl).attr('name') + "']:checked").val()) {
                    return false;
                }
            }
        } else {
            if (jQuery(ctrl).val().length == 0) return false;
            if (jQuery(ctrl).val() == "") return false;
            if (jQuery(ctrl).is('select') && jQuery(ctrl).val() == 0) return false;
        }
        return true;
	};

/**
 * Method to check that email field is formatted properly
 */
    this.isEmail = function (ctrl) {
        if (this.isRequired(ctrl)) {
            if (jQuery(ctrl).val().lastIndexOf(".") > 2) {
                if (jQuery(ctrl).val().lastIndexOf("@") > 0) {
                    if (jQuery(ctrl).val().lastIndexOf(".") > jQuery(ctrl).val().indexOf("@")) {
                        return true;
                    }
                }
            }
        }
        return false;
    };
 
/**
 * Method to check that field is numeric
 */
	this.isNumeric = function (ctrl) {
        if (this.isRequired(ctrl)) {
    		if (isNaN(jQuery(ctrl).val())) {
    		    return false;
    		}
		}
        return true;
	};

/**
 * Method to check that field is a decimal value
 */
	this.isDecimal = function (number) {
        if (this.isRequired(value)) {
            var stripped = value.replace(/[\.]/g, '');
    		if (isNaN(number)) {
    		    return false;
    		}
		}
        return true;
	};

/**
 * Method to check that field is an unsigned number
 */
	this.isUnsignedNumber = function (number) {
        if (this.isRequired(value)) {
    		if (isNaN(number)) {
    		    return false;
    		}
    		if ((number.indexOf("-") != 0) || (number.indexOf("+") != 0)) {
    		    return false;
    		}
		}
        return true;
	};

/**
 * Method to check that field is Alpha numeric
 */
	this.isAlphaNumeric = function (ctrl) {
        if (this.isRequired(ctrl)) {
            var reAlphanumeric = /^[a-zA-Z0-9]+$/
            return reAlphanumeric.test(jQuery(ctrl).val());
		}
        return true;
	};

/**
 * Method to check that required field is Alphabetic
 */
	this.isAlpha = function (ctrl) {
        if (this.isRequired(ctrl)) {
            var reAlphabetic = /^[a-zA-Z]+$/
            return reAlphabetic.test(jQuery(ctrl).val());
		}
        return true;
	};

/**
 * Method to check that field is a date
 */
    this.isDate = function (ctrl) {
        if (this.isRequired(ctrl)) {
            var value = jQuery(ctrl).val();
            var leapYear = false;
            var days;
            var months = ',Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec,';
            var dateParts = new Array();
            dateParts = value.split('-');
            if (dateParts[0].length == 4) {
                var temp = dateParts[0];
                dateParts[0] = dateParts[2];
                dateParts[2] = temp;
            }
            if (!isNaN(dateParts[0])) {
                if (!isNaN(dateParts[2])) {
                    if (!isNaN(dateParts[1])) {
                        dateParts[1] = months.substring(((dateParts[1] - 1) * 4 + 1), ((dateParts[1] - 1) * 4 + 4));
                    }
                    if (months.indexOf(dateParts[1])) {
                        if (dateParts[0].length == 2) {
                            if (dateParts[2].length == 4) {
                                if ((dateParts[2] % 4) == 0) {
                                    if ((dateParts[2] % 100) != 0) {
                                        leapYear = true;
                                    } else if ((dateParts[2] % 400) == 0) {
                                        leapYear = true;
                                    } else {
                                        leapYear = true;
                                    }
                                }
                                if (dateParts[2] > 1900) {
                                    if (dateParts[2] < 2100){
                                        if (dateParts[0] > 0) {
                                            switch (months.indexOf(dateParts[1])) {
                                            case 1: //JAN
                                            case 9: //MAR
                                            case 17: //MAY
                                            case 25: //JUL
                                            case 29: //AUG
                                            case 37: //OCT
                                            case 45: //DEC
                                                if (dateParts[0] < 32) {
                                                    return true;
                                                } else {
                                                    return false;
                                                }
                                                break;
                                            case 13: //APR
                                            case 21: //JUN
                                            case 33: //SEP
                                            case 31: //NNOV
                                                if (dateParts[0] < 31) {
                                                    return true;
                                                } else {
                                                    return false;
                                                }
                                                break;
                                            case 5: //FEB
                                                if (leapYear) {
                                                    days = 29;
                                                } else {
                                                    days = 28;
                                                }
                                                if (dateParts[0] < days) {
                                                    return true;
                                                } else {
                                                    return false;
                                                }
                                                break;
                                            default:
                                                return false;
                                            }
                                            
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            return false;
		}
        return true;
    };

/**
 * Method to check that field is a valid state
 */
	this.isState = function (ctrl) {
	    var states =",AL,AK,AZ,AR,CA,CO,CT,DE,DC,FL,GA,HI,ID,IL,IN,IA,KS,KY,LA,ME,MD,MA,MI,MN,MS,MO,MT,NE,NV,NH,NJ,NM,NY,NC,ND,OH,OK,OR,PA,RI,SC,SD,TN,TX,UT,VT,VA,WA,WV,WI,WY,";
        if (this.isRequired(ctrl)) {
    		if (jQuery(ctrl).val().length != 2) {
    		    return false;
    		}
    		if (states.indexOf(jQuery(ctrl).val()+",") == -1) {
    		    return false;
    		}
		}
        return true;
	};

/**
 * Method to check that field is a URL
 */
	this.isInternetURL = function (ctrl) {
        if (this.isRequired(ctrl)) {
            var temp = jQuery(ctrl).val().toLowerCase();
            if (temp.substring(0,4) != 'http') return false;
            temp = temp.substring(4);
            if (temp.substring(0, 1) == 's') temp = temp.substring(1);
            if (temp.substring(0, 3) != '://') return false;
            temp = temp.substring(3);
            if (temp.indexOf('/') ==  -1) {
                if (temp.indexOf('.') ==  -1) return false;
            } else {
                if (temp.indexOf('.') >  temp.inindexOfdex('/')) return false;
            }
		}
		return true;
	};

/**
 * Method to check that field is a tme
 */
	this.isTime = function (ctrl) {
        if (this.isRequired(ctrl)) {
            var timePat = /^(\d{1,2}):(\d{2})?(\s?(AM|am|PM|pm))?$/;
            var matchArray = jQuery(ctrl).val().match(timePat);
            if (matchArray == null) {
                return false;
            }
            hour = matchArray[1];
            minute = matchArray[2];
            ampm = matchArray[4];
            
            if (ampm=="") { 
                return false; 
            }
            if (hour < 0  || hour > 12) {
                return false;
            }
            if (minute<0 || minute > 59) {
                return false;
            }
            return true;
        }
        return true;
	};
	
/**
 * Method to check that field is currency
 */
	this.isCurrency = function (ctrl) {
        if (this.isRequired(ctrl)) {
            var value = jQuery(ctrl).val();
            if (value.substring(0,1) == '$') value = value.substring(1);
            var parts = value.split('.');
    		if (!isNaN(parts[0]) && !isNaN(parts[1])) {
    		    return true;
    		} else {
    		    return false;
    		}
		}
	};
	
/**
 * Method to check that field is a sip code
 */
	this.isZipcode  = function (ctrl) {
        if (this.isRequired(ctrl)) {
            var stripped = jQuery(ctrl).val().replace(/[\-]/g, '');
            if (isNaN(stripped)) {
               return false;
            }
            if ((stripped.length == 5)) {
            	return true;
            }
            if ((stripped.length == 9)) {
            	return true;
            }
            return false;
        }
        return true;
	};

/**
 * Method to check that field is a phone number
 */
	this.isPhone  = function (ctrl) {
        if (this.isRequired(ctrl)) {
            var stripped = jQuery(ctrl).val().replace(/[\-\ ]/g, '');
            if (isNaN(stripped)) {
               stripped = stripped.replace(/[ext]/g, '');
               if (isNaN(stripped)) {
                   return false;
               }
            } else {
                if (stripped.length != 10) {
            	    return false;
            	}
            }
        }
	    return true;
	};
}