jquery datepicker validation not working on first time date selection - Answers - Salesforce Trailblazer Community
Trailblazer Community
Ask Search:
Sunitha sfdcSunitha sfdc 

jquery datepicker validation not working on first time date selection


jquery datepicker validation not working on first time date selection - below is the code. Please help us with right solution
-------

<apex:page Controller="AddGMRClaimController" sidebar="false" showHeader="false" docType="html-5.0">

 <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
 
 <script type="text/javascript" src="{!URLFOR($Resource.BootstrapDatepicker151, 'js/bootstrap-datepicker.js')}"></script>
 
 <script type="text/javascript" src="{!URLFOR($Resource.InputMask)}"></script>
   
 <link rel="stylesheet" type="text/css" href="{!URLFOR($Resource.BootstrapDatepicker151, 'css/bootstrap-datepicker.standalone.css')}"></link>

    <style type="text/css">
        .drop-shadow {
        -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, .5);
        box-shadow: 0 0 5px 2px rgba(0, 0, 0, .5);
        border-radius:5px;
        padding:10px;
        margin-top:10px;
        }
        .datePicker {
            display:none!important;
        }
        .dateFormat{
            display:none!important;
        }
        .gmrGlyph
        {
            font-size: 2.5em !important;
            padding: 0 16px 0 16px !important;
        }        
        input[readonly]
        {
            top: 1px;
            background-color: white !important;
            cursor: text !important;
        }   
        .error{
            color:red;
            font-weight:bold;
        }
        .form-control.error{
            border-color:red;
        }
    </style>
    <script> 
           function changeValue(input, textid) {          
            $('.'+textid).val(input.value);         
            }  
            
            function getIEFileSize(file){
            var myFSO = new ActiveXObject("Scripting.FileSystemObject"),
            filepath = file.value,
            thefile = myFSO.getFile(filepath);
            return thefile.size;
        }       
      
        $(document).ready(function(){
            initialize();
        });
        
        var initialize = function(){
        
            
            function verifyDate(dateField) {
            var d = new Date();
            var n = d.getFullYear();
            var df = new Date(dateField);
              var done = false;
                
              if(dateField != null || dateField != ''){
                //split the date as a tmp var
                var tmp = dateField.split('/');
                //get the month and year
                var month = parseInt(tmp[0]);
                var year = parseInt(tmp[2]);  
                var dat = parseInt(tmp[1]); 
                var df = new Date(dateField);              

               if(month >= 1 && month <= 12 && year >= 1990 && df < d){                  
                   done = true;       
               } 
            }
            return done;            
          }
                                   
           $('.datepicker').attr('maxLength',10);
           
           //Check for valid email           
           $.validator.addMethod("validEmail", function(value, element) {
                return this.optional(element) || /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/.test(value);
            }, "Email Address is invalid: Please enter a valid email address.");
            
           //Restrict Trip number to allow only alpha numeric characters
           $('.tripNumber').alphanum();
           
           //Datepicker - Trip date
           //Format Datepicker to allow only dates from 1990 - 2030
            $('.datepicker').datepicker({
                format : "mm/dd/yyyy",
                startDate: "01/01/1990",
                //endDate: "12/31/2030",
                endDate: Date(),
                autoclose: true,
                forceParse: false
            });            
            
            //Check the valid date
            $.validator.addMethod("verifyDate", function(value, element) {
                return this.optional(element) || verifyDate(value);
            }, "Please enter a valid date.");
               
             
           //Add slashes automatically
           $(".datepicker").keyup(function(e){
           if (e.keyCode != 8){   
                if ($(this).val().length == 2){
                    $(this).val($(this).val() + "/");
                } else if ($(this).val().length == 5){
                    $(this).val($(this).val() + "/");
                }
            } else {
                var temp = $(this).val();            
                if ($(this).val().length == 5){                
                    $(this).val(temp.substring(0,4));    
                } else if ($(this).val().length == 2){        
                    $(this).val(temp.substring(0,1));    
                }
            }
           });
           
            // Validate signup form on keyup and submit
                $('[id$=gmrForm]').validate();    
                
                $('[id$=addTrip]').validate();
                
                
                $('.datepicker').each(function(index, datepicker){
                    $(datepicker).rules("add",{
                        verifyDate: true,
                        maxlength:10
                    });
                });
                               
        };
    </script>
 
    <vs:importvisualstrap />

    <vs:visualstrapblock >
        <apex:outputPanel layout="block" styleClass="container">
            <center>
                <apex:image id="theImage" value="{!$Resource.Logo}" alt="Mileage Reimbursement Form"/>
            </center>          
            <apex:pageMessages />
            
            <apex:form id="gmrForm" styleClass="drop-shadow">
           <!-- <apex:inputHidden value="{!tripVal}" styleClass="tripPiclistValue" id="myHiddenField"/>-->
            
                <apex:actionRegion >
                    <vs:panel title="Member Information" type="primary">
                     </vs:panel>
                    <vs:panel id="panelId" title="Trip Information" type="primary">                                      
                        <apex:dataTable id="tripsTable" value="{!gmrTrips}" var="trips" styleClass="table table-hover table-condensed">
                            <apex:column headerValue="Trip Number">
                                <apex:inputText styleClass="form-control tripNumber" html-placeholder="Trip Number" required="true" value="{!trips.gmrTrip.Trip_Number__c}" maxlength="11"/>
                            </apex:column>
                            
                            <apex:column headerValue="Trip Date">
                                <apex:inputField styleClass="form-control datepicker" value="{!trips.gmrTrip.Trip_Date__c}" required="true" id="tripDate"/>                                    
                            </apex:column>
                            <apex:column headerValue="Trip Type">                                
                                <div class="btn-group" data-toggle="buttons">
                                   <apex:repeat value="{!tripTypeOptions}" var="tripTypes">
                                        <apex:variable var="active" value="{!IF(trips.gmrTrip.Trip_Type__c == tripTypes.value, 'active', '')}" />
                                        <label class="btn btn-default {!active}">
                                            <input type="radio" name="TripType" value="{!tripTypes.value}" onchange="changeValue(this,'{!trips.ident}_tripType');" /> {!tripTypes.value}
                                        </label>
                                    </apex:repeat>
                                </div>
                                
                        <apex:commandLink id="addTrip" action="{!addGMRTrip}" reRender="tripsTable" oncomplete="initialize();" styleClass="btn btn-success" value="Add Trip" />
                       
                    </vs:panel>
               </apex:actionRegion>                
                
                 <vs:panel title="Trip Log" type="primary">
                    <div class="input-group">
                        <span class="input-group-btn">
                            <span class="btn btn-primary btn-file">
                            
                                Browse&hellip; <apex:inputFile value="{!attachment.body}" filename="{!attachment.name}" id="file" styleclass="uploadFile"/>                                
                        </span>
                        </span>
                        <input type="text" class="form-control" readonly="true" required="true" />
                    </div>
                </vs:panel>
                
                <vs:formblock >
                    <vs:formgroup style="margin-top:30px;">
                        <vs:column type="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <center>
                             <center>                   
                        
                        <apex:outputText >Receipts</apex:outputText>
                       <br/> <apex:inputCheckbox value="{!Receiptsattached}" />
                       <br/><apex:outputText >Check here if you have included receipt that need to be processed</apex:outputText>
                        </center> <br/>
                                <apex:commandButton value="Save GMR Claim" action="{!saveGMRClaim}" styleClass="btn btn-success" id="btnSave"/>
                            </center>
                            </vs:column>
                    </vs:formgroup>
                </vs:formblock>      
                 
            </apex:form> 
                     
                 <apex:outputLabel style="padding-top:2%;" value="HIPAA Disclosure: Information and personal contact information you enter on this form will be securely transmitted directly to MTM and will be kept confidential to the extent required by HIPAA."/>
                    <apex:outputLabel value="ADA Disclosure: If you need help translating or understanding this process, please call MTM, Inc. at 888-513-0703. If you have a speech or hearing disability, call the TTY line at 1-800-855-2880."/>    
               
        </apex:outputPanel>
    </vs:visualstrapblock>
   
</apex:page>
Sunil SarillaSunil Sarilla
Please post this question in one of the developer forums for a quick response, this forum is more focussed towards the declarative side of things.
https://developer.salesforce.com/forums/#!/feedtype=RECENT&criteria=ALLQUESTIONS
http://salesforce.stackexchange.com/
Benjamin BolopueBenjamin Bolopue
+1 Sunil

Sunitha,
While you'll be able to get great direction on processes and most anything declarative here, you won't find many coders able to pick through something like what you posted. Sunil's 100% spot on. The locations he suggested will be of most help to you.

Good luck!

Thanks,
Ben
Sunitha sfdcSunitha sfdc
Thank you