Friday, 28 April 2017

                 Jquery Validation In Visual force pages:


Here I'm going to explain how we can use jquery in visualforce pages.Scenario is very simple if user has to enter the name in account name field.If account name is  less than 2 character  it shows warning  message to the  user.

Whats the use of this post?
This Post shows how to embeded jquery in visualforce Pages.Use this Logic according to your requirement.

For Example:If user is filling the 'Form' (may be Website) that time you have to validate the information means you can easily achieve it using this logic

<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"/>
<!-- Jquery Logic Starts here -->
<script type="text/javascript">
    $ = jQuery.noConflict();
    $(document).ready(function() {
        $('[id$=Form]').validate();          
        $('[id$=name]').rules("add",{
            required: true,
            minlength:2,
            messages:{
                required:"
<br/>Required input",
                minlength: jQuery.validator.format("
<br/>
<label style='color:red'>Please, at least 2 characters are necessary</label>"),
            }
        });  
     
     
    });
  </script>
<apex:form id="Form" >
<apex:outputlabel for="name">Account Name
<span class="star">*</span>
</apex:outputlabel>
<apex:inputtext id="name" value="{!account.name}" required="true"/>
<apex:commandButton value="Save" action="{!save}" />
</apex:form>
</apex:page>

I hope you enjoy this post..Have a great day..