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...
Posted in: JQuery Validator in salesforce,JQuery Validator in visualforce pages
3 comments:
Could you please update why we need errorClass ?
I provide Salesforce Online Classes
i am a freelancer and work according to contract, for more details contact us with the information provided below.
play game and win snapdeal lucky draw coupon 2019. contact us, play and win snapdeal lucky draw winner prizes.
lucky draw snapdeal contact number 6289379055 call to get more information
Lucky Draw Snapdeal costomer care number
snapdeal lucky draw contact number
snapdeal lucky draw contest 2019
snapdeal lucky draw 2019 list
snapdeal lucky draw contact number
snapdeal lucky draw 2019
Best Regards
snapdeal lucky draw winners 2019
Post a Comment