Sunday, April 3, 2016

JQuery Validator in visualforce pages.

JQuery Validator in visualforce pages.


JQuery Validator :


<apex:page standardController="Bootstrap_Object__c" docType="html-5.0" standardStylesheets="false" sidebar="false" showHeader="false">

<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
     
<apex:includeScript value="https://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"/>
     
    <head>
        <title> Jquery Form Validation1</title>
        <style>
         .container{
            margin:0px auto;
            background:#eee;
            width:50%;
            }
           .form-area{
             padding:1%;
             border:1px solid #003;
           
            }
            .form-element{
             margin-bottom:10px;
             padding:10px;
            }
            .form-element input{
             padding:10px;
             width:90%;
            }
            .submit{
             padding:10px;
             background:#900;
             color:#fff;
             border-width:opx;
             margin-left:40%;
            }
            .error{
              font-weight:bold;
              color:#900;
            
            }
            td.a {
            width: 30%;           
             padding: 15px;
            text-align: left;
           //  border: 1px solid black;
            }
            
            td.b {
            width: 50%;
             padding: 5px;
            text-align: left;
          //   border: 1px solid black;
            }
            table {
            width: 80%;
            
            }

            
       
        </style>
        
    </head>
    <body>
        <div class="container">
            <div class="form-area">
                   <apex:form id="CustomerForm">
                    <div class="form-element">
                     <table>
                      <tr>
                       <td class="a"> Customer Name </td>
                       <td class="b" > <apex:inputField value="{!Bootstrap_Object__c.name}"  html-placeHolder="Customer Name" id="customerName" /></td>
                      </tr>
                     
                      <tr>
                       <td class="a"> Age </td>
                       <td class="b" > <apex:inputField value="{!Bootstrap_Object__c.Age__c}"  html-placeHolder="Customer Age" id="Age__c"  label="Age"/></td>
                      </tr>
                      
                      <tr>
                       <td class="a"> Email </td>
                       <td class="b" > <apex:inputField value="{!Bootstrap_Object__c.Contact_Emai__c}"  html-placeHolder="Customer Email" id="Contact_Emai__c" /></td>
                      </tr>
                      
                       <tr>
                       <td class="a"> Phone Number</td>
                       <td class="b" > <apex:inputField value="{!Bootstrap_Object__c.Phone_Number__c}"  html-placeHolder="Phone Number" id="Phone_Number__c" /></td>
                      </tr>
                      
                     
                     </table>      
                           
                   
                    
                 <!--   <label for="Contact_Emai__c" class="error" id="Contact_Emai_error"></label> -->
                    </div>
                    <apex:commandButton action="{!save}" value="Save Form" id="submit" styleClass="submit" />
                    
                    </apex:form>
            </div>
           
            
        </div>
    <script type="text/javascript"> 
       
           
         $('[id$=CustomerForm]').validate();             
              errorclass: "myerrorclass";
              
               $('[id$=customerName]').rules("add",{
                required: true,
                minlength: 5,
                maxlength: 50,               
                messages:{
                  required:"<br/>Required Customer Name",
                  minlength: jQuery.validator.format("<br/>Please etner at least 5 characters are necessary"),
               }                           
            }); 
            
           
            $('[id$=Age__c]').rules("add",{
                required: true,
                minlength: 2,
                maxlength: 2,  
               range: [18, 99],             
                messages:{
                  required:"<br/>Required input",
                  minlength: jQuery.validator.format("<br/>Please, at least 2 characters are necessary"),
               }                           
            }); 
            
              $('[id$=Contact_Emai__c]').rules("add",{
                required: true,
               email:true,              
                messages:{
                  required:"<br/>Required Email",
                  email: jQuery.validator.format("<br/>Please enter valid email id"),
               }                           
            }); 
            
            $('[id$=Phone_Number__c]').rules("add",{
               required: true,                           
                messages:{
                  required:"<br/>Required Phone",                 
               }                           
            }); 
      
    </script>
    </body>
</apex:page>




Example 2:

Validation with error message.


<apex:page standardController="Contact">
  <apex:includescript value="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" />
  <apex:includescript value="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" />

  <apex:form id="createform">
    <apex:sectionHeader title="Contact Create" />
    <apex:pageBlock title="Detail" id="pblock">
      <apex:pageBlockButtons >
        <apex:commandButton value="Save" action="{!save}" /> 
        <apex:commandButton value="Cancel" action="{!cancel}" immediate="true" />
      </apex:pageBlockButtons>
      <apex:pageBlockSection columns="1" id="pbsection">
        <apex:inputField value="{!Contact.Salutation}" />
        <apex:inputField value="{!Contact.FirstName}" />
        <apex:inputField value="{!Contact.LastName}" />
        <apex:inputField id="contactemail" value="{!Contact.Email}" />
        <apex:inputField id="contactphone" value="{!Contact.Phone}" />
      </apex:pageBlockSection>
    </apex:pageBlock>
  </apex:form>
  <script>
  $ = jQuery.noConflict();

    $(document).ready(function(){
    /* configure the validator  - set the email element to required if the phone is empty and vice versa */
        var validator = $('[id="{!$Component.createform}"]').validate({
                    debug: true,
                    rules: {
                        '{!$Component.createform.pblock.pbsection.contactemail}': {
                                required: function() {
                                    return $('[id="{!$Component.createform.pblock.pbsection.contactphone}"]').val()=='';
                                }
                        },  // email
                        '{!$Component.createform.pblock.pbsection.contactphone}': {
                                required: function() {
                                    return $('[id="{!$Component.createform.pblock.pbsection.contactemail}"]').val()=='';
                                }
                        },  // phone
                    },  // rules
                    messages: {
                        '{!$Component.createform.pblock.pbsection.contactemail}':"One of Email or Phone must be provided",
                        '{!$Component.createform.pblock.pbsection.contactphone}':"One of Phone or Email must be provided",
                    } // messages
            }
    )});
  </script>
</apex:page>





Example 3 :

<apex:page standardcontroller="Account" showHeader="false" standardStylesheets="false">
    <apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
  
    <apex:includeScript value="https://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"/>
    <apex:includeScript value="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"/>
      <script type="text/javascript"> 
        $ = jQuery.noConflict();
        $(document).ready(function() {
        $('[id$=commentForm]').validate();             
              
            $('[id$=name]').rules("add",{
                required: true,
                minlength: 5
            });     
             
            $('[id$=email]').rules("add",{
                required: true,
                email: true
            });      
             
            $('[id$=url]').rules("add",{
                url: true
            });
             
            $('[id$=comment]').rules("add",{
                required: true
            });
             
            $('[id$=pwd]').rules("add",{
                required: true,
                minlength: 5
            });
              
            $('[id$=cpwd]').rules("add",{
                required: true,
                minlength: 5,
                equalTo: '[id$=pwd]'
            });   
             
            /* Customised the messages */
           jQuery.validator.messages.required = "<label style='color:red'>This field is required</label>"; 
           jQuery.validator.messages.equalTo = "<label style='color:red'>No silly, you're supposed to type the same set of characters AGAIN.</label>";
                                                          
        });
         
    </script> 
     
   
        <apex:define name="title">
            <a href="http://thesilverlining-developer-edition.na7.force.com/jqueryvalidatedemo/">jQuery Forms Validation Demo</a>
        </apex:define>
         
        <apex:define name="blurb">
            <p>
                Fiddle with the form entering combinations of correct and incorrect values to see the validation rules in action. Hitting the sumbit button will also trigger form checking.
            </p>
        </apex:define>


        <apex:define name="content">    
            <apex:outputPanel layout="block" style="text-align:center; font-size:12px;padding: 4px">
                <apex:form id="commentForm" > 

                        <apex:outputlabel for="name">Name <span class="star">*</span></apex:outputlabel> 
                        <apex:inputtext id="name" value="{!account.name}" required="true"/>
                        <br/>
                        <apex:outputlabel for="email">E-Mail <span class="star">*</span></apex:outputlabel> 
                        <apex:inputtext id="email"  value="{!account.name}" required="true"/> 
                        <br/>
                        <apex:outputlabel for="url">URL (optional)</apex:outputlabel> 
                        <apex:inputtext id="url"  value="{!account.name}" required="true" /> 
                        <br/>
                        <apex:outputlabel for="comment">Your comment <span class="star">*</span></apex:outputlabel> 
                        <apex:inputtextarea id="comment" value="{!account.name}"  style="width: 30%" required="true"/>
                        <br/>
                        <apex:outputLabel for="pwd">Password <span class="star">*</span></apex:outputLabel>
                        <apex:inputSecret id="pwd" value="{!account.name}" required="true"/>
                        <br/>
                        <apex:outputLabel for="cpwd">Confirm Password <span class="star">*</span></apex:outputLabel>
                        <apex:inputSecret id="cpwd" value="{!account.name}" required="true"/>                        
                        <br/>
                        <apex:commandButton value="Save" action="{!save}" />
                        <!--
                        <input type="submit" />
                          
                         -->
                </apex:form>
             
            </apex:outputPanel>
             
        </apex:define>
  
</apex:page>





Thanks for reading...












0 comments:

Post a Comment

 
| ,