javascript

Validations using JQuery.

Plugins:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> </script>
        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js" type="text/javascript"> </script>   
              <script type="text/javascript" src="jQueryPlugins/date.js"></script>


// Must use validate method before creating and using rules.
 $("#Form_ID").validate({
                errorElement: "em",   //This is a css class for showing error messege
            });


//Rules for File upload  control
$('#fu_PassportFront').rules('add', {
                required: true,
                messages: {
                    required: "Please Upload Passport Front Page."
                }
            });


 //Rule for each text box with classname passportNo                    
            $('.passportNo').each(function () {
                $(this).rules('add', {
                    required: true,
                    lettersAndNumbers: true,
                    messages: {
                        required: "Please enter Passport Number.",
                        lettersAndNumbers: "Only alphanumeric for passport."
                    }
                });
            });
//Rules for Date
            $('.passIssueDay').each(function () {
                $(this).rules('add', {
                    required: true,                   
                    validateDate: true,
                    MaxDate: true,
                    messages: {
                        required: "Please enter Date",                       
                        validateDate: "Please enter a valid date dd/mm/yyyy.",
                        MaxDate: "Invalid Issue date"
                    }
                });
            });

            $('.passExpDay').each(function () {
                $(this).rules('add', {
                    required: true,
                    validateDate: true,
                    MinDate: true,
                    messages: {
                        required: "Please enter Date",
                        validateDate: "Please enter a valid date dd/mm/yyyy.",
                        MinDate: "Invalid Expiry date"
                    }
                });
            });
//Register methods.
            jQuery.validator.addMethod("lettersAndNumbers", function (value, element) {
                return this.optional(element) || /^[a-zA-Z0-9]*$/i.test(value);
            }, "Please enter alphabets and numbers only.");

            jQuery.validator.addMethod("MinDate",function(value,element){
            try{
            var minDate= new Date()
            var d = Date.parseExact(value, "d/M/yyyy");
            if(d==null){return false;}
            else if(d<minDate){return false;}
            else{return true;}
            }
            catch(e){return fals;}           
            },"Date Shoule be greater than current date"); 

             jQuery.validator.addMethod("MaxDate",function(value,element){
            try{
            var maxDate= new Date()
            var d = Date.parseExact(value, "d/M/yyyy");
            if(d==null){return false;}
            else if(d>maxDate){return false;}
            else{return true;}
            }
            catch(e){return fals;}           
            },"Date Shoule be less than current date");

            jQuery.validator.addMethod("validateDate", function (value, element) {
                try {
                    var d = Date.parseExact(value, "d/M/yyyy");
                    if (d == null) {
                        return false;
                    } else {
                        return true;
                    }
                }
                catch (e) {
                    return false;
                }
            }, "Please enter a valid UK date dd/mm/yyyy");








Position :

 function getPosition(element)
    {
               var left = 0;
               var top = 0;
              
               if(element.offsetParent)
               {
                       while(element)
                       {
                               left += element.offsetLeft;
                               top += element.offsetTop;
                               element = element.offsetParent;
                       }
               }
               else
               {
                   left += element.offsetLeft;
                   top += element.offsetTop;
               }
               return {offsetLeft: left, offsetTop: top};
    }

var pos=getPosition(obj);
        document.getElementById("showtooltip").style.top = pos.offsetTop+obj.offsetHeight + "px";      
        document.getElementById("showtooltip").style.left = pos.offsetLeft + "px";
        document.getElementById("showtooltip").innerHTML = DetailsVar;
        document.getElementById("showtooltip").style.display = 'block';