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()=='';
}
'{!$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...
