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>

Result:

 

Please share with us in the comments section below. And to upgrade your Salesforce Org with latest features and updates, Talk to our team at Tecnovators, a one-of-a-kind Salesforce consulting partner delivering pay-as-you-use On demand services for Salesforce.

Also, you can give us a call at 313-209-7137 or email us at info@tecnovators.com