How to achieve validation by jQuery in Visualforce?

I have seen this article and try to adopt this method.
Salesforce Form Validation Enhanced:
https://th3silverlining.com/2010/03/02/visualforce-form-validation-enhanced/
However, I do not know why I get nothing happen even I have followed the step. Here is my code:

<apex:page standardController="Artist__c" extensions="extattachfile" showHeader="false" sidebar="false">
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<style type="text/css">
h1 {font-size: 150%; font-weight: bold;}
h2 {font-size: ;}
p { width:100%;
    font-size: 120%;
    text-align: justify;
    text-justify: inter-word;}
.reddot {color: red; font-size:120%;}
.textarea { height:200px; 
            width:300px;
            border-radius: 5px;}
.url {width:300px;}
.title {font-size:175%;}
.standard {width: 310px;}
@media only screen and (min-width: 900px) {
    /* For desktop: */
p { width:890px;
    font-size: 120%;
    text-align: justify;
    text-justify: inter-word;}
}
.color {
    background-color: #F7F6D2;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
</style>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/>
<apex:includescript value="{!$Resource.jQuery}"></apex:includescript>
<apex:includescript value="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"></apex:includescript>
</head>    

    <script type="text/javascript"> 
        $(document).ready(function() {
              
            $('[id$=artistform]').validate();             
              
            $('[id$=engname]').rules("add",{
                required: true,
            });     
             
            $('[id$=email]').rules("add",{
                required: true,
                email: true
            });      
             
             
            /* Customised the messages */
            jQuery.validator.messages.required = "You better have entered a value.. or else!"; 
            jQuery.validator.messages.equalTo = "No silly, you're supposed to type the same set of characters AGAIN.";                                                
        });
         
    </script> 
     

<apex:form styleclass="form" id="artistform">
   <apex:pageBlock >
<apex:pageMessages />
<div><b class="title">Artist Submission Form</b></div><br/>

<br/>
     <h1>Artist / Group Information 表演者 / 團體資料</h1>
     <br/><br/>
<br/>
      <div class="standard">
     <h2 >Artist Name (English)</h2><br/>
	<apex:outputText styleClass="reddot" value="*"/>
     <apex:panelGroup styleClass="col02 requiredInput" layout="block">
     <apex:panelGroup styleClass="requiredBlock" layout="block"/>
     <apex:inputField value="{!artist.Artist_Group_Name_English__c}" label="" id="engname"/>
     </apex:panelGroup>
     <br/>      </div>
<br/>
<br/>
      <div class="standard">
     <h2 >Artist Biography (English)</h2><br/>
	<apex:outputText styleClass="reddot" value="*"/>
     <apex:panelGroup styleClass="col02 requiredInput" layout="block">
     <apex:panelGroup styleClass="requiredBlock" layout="block"/>
     <apex:inputField value="{!artist.Artist_Group_Biography_English__c}" label="" styleClass="textarea" id="engbio"/>
     </apex:panelGroup>
     <br/><br/>      </div>
<br/>
      <div class="heading">
     <h1>Name and Roles of Group Members (if applicable)</h1>
     <br/><br/>      </div>
<br/>
      <div class="standard">
     <h2>Name and Roles of Group Members</h2><br/>
     <h2>團體成員姓名及崗位</h2><apex:outputText styleClass="reddot" value=""/><br/>
     <apex:inputField value="{!artist.Member_Name_Role__c}" label="" styleClass="textarea"/><br/>
     <br/>      </div>
<br/>
      <div class="standard">
     <h2 >Photo of Artist : max 3 attachments</h2><br/>
	<apex:outputText styleClass="reddot" value="*"/>
     <br/>
     <apex:panelGroup styleClass="col02 requiredInput" layout="block">
     <apex:panelGroup styleClass="requiredBlock" layout="block"/>
     <apex:inputFile value="{!objAttachment.body}" fileName="{!objAttachment.name}" required="false" id="photo"/><br/></apex:panelGroup>
     <apex:inputFile value="{!objAttachment2.body}" fileName="{!objAttachment2.name}" required="false" /><br/>
     <apex:inputFile value="{!objAttachment3.body}" fileName="{!objAttachment3.name}" required="false" />
     <br/><br/>      </div>
<br/>
      <div class="standard">
     <h2>Website</h2><outputtext/><apex:outputText styleClass="reddot" value=""/><br/>
     <apex:inputField value="{!artist.Website__c}" label="" styleClass="url" id="web"/><br/>
     <br/>      </div>
<br/>
      <div class="standard">
     <h2 >Facebook</h2><apex:outputText styleClass="reddot" value=""/><br/>
     <apex:inputField value="{!artist.Facebook__c}" label="" styleClass="url" id="facebook"/><br/>
     <br/>      </div>
<br/>
      <div class="standard">
     <h2 >SoundCloud</h2><apex:outputText styleClass="reddot" value=""/><br/>
     <apex:inputField value="{!artist.SoundCloud__c}" label="" styleClass="url" id="soundcloud"/><br/>
     <br/>      </div>
<br/>
      <div class="standard">
     <h2 >YouTube</h2><apex:outputText styleClass="reddot" value=""/><br/>
     <apex:inputField value="{!artist.YouTube__c}" label="" styleClass="url" id="youtube"/>
     <br/>      </div>
<br/><br/>
      <div class="standard">
     <h2>Technical Rider : max 1 attachment</h2><br/>
	<apex:outputText styleClass="reddot" value=""/><br/>
     <apex:inputFile value="{!objAttachmentt.body}" fileName="{!objAttachmentt.name}" /><br/>      </div>
<br/>
      <div class="standard">
     <h2>Stage Plot : max 1 attachment</h2>
     <br/>
	<apex:outputText styleClass="reddot" value=""/><br/>
    
     <apex:inputFile value="{!objAttachments.body}" fileName="{!objAttachments.name}" required="false" /><br/><br/>      </div>
<br/>
      <div class="heading">
     <h1>Contact Information</h1> <br/><br/>      </div>
<br/>
      <div class="standard">
     <h2>Contact Person</h2><apex:outputText styleClass="reddot" value="*"/><br/>
     <apex:panelGroup styleClass="col02 requiredInput" layout="block">
     <apex:panelGroup styleClass="requiredBlock" layout="block"/>
     <apex:inputField value="{!artist.Contact_Person__c}" label="" id="contactperson"/>
     <br/>
     </apex:panelGroup>      </div>
<br/>
      <div class="standard">
     <h2 >Contact No.</h2><apex:outputText styleClass="reddot" value="*"/><br/>
     <apex:panelGroup styleClass="col02 requiredInput" layout="block">
     <apex:panelGroup styleClass="requiredBlock" layout="block"/>
     <apex:inputField value="{!artist.Contact_Number__c}" label="" id="contactno"/>
     <br/>
     </apex:panelGroup>      </div>
<br/>
      <div class="standard">
     <h2>Email</h2><apex:outputText styleClass="reddot" value="*"/><br/>
     <apex:panelGroup styleClass="col02 requiredInput" layout="block">
     <apex:panelGroup styleClass="requiredBlock" layout="block"/>
     <apex:inputField value="{!artist.Email__c}" label="" id="email"/>
     <br/>
     </apex:panelGroup>      </div>
<br/>

<br/>
      <div>

        <apex:commandButton action="{!save}" value="Save"/>
      </div>
      
<script>
var addclass = 'color';
var $cols = $('.standard').click(function(e) {
    $cols.removeClass(addclass);
    $(this).addClass(addclass);
});


</script>

</apex:pageBlock>       
</apex:form>
<apex:pageMessages />
</apex:page>

Thanks for your help.

August 14, 2016
·
Like
0
·
Follow
1

Best Answer chosen by Alex Wong 4

Scott Haleo 4
Hi Alex,

You can get more information here in below links.

http://sfdcsrini.blogspot.com/2016/04/jquery-validatior.html

https://th3silverlining.com/2010/03/02/visualforce-form-validation-enhanced/

For more help share your issues.

Regards,

Scott Haleo
Hytechpro

August 16, 2016
·
Like
0
·
Dislike
0

This was selected as the best answer

Alex Wong 4
@Scott Haleo 4, even I follow the first link, it did not work. I want to ask that is these method need the field set to be "required"? I did not set the field as required at the custom object field level. Because it will generate a standard error message, which cannot show together with my custom message. Therefore, I use apex to make the field become "required" by not passing these bad data and show custom message. Is this affect the method? Thanks.

August 16, 2016
·
Like
0
·
Dislike
0

Scott Haleo 4
Hi Alex,

Yes
Using jquery you can put your custom validation message on field.

Thanks. :)

Scott Haleo

August 16, 2016
·
Like
0
·
Dislike
0

Alex Wong 4
But I it return nothing on my page... Is there any problem in my script?
<apex:page standardController="Artist__c" extensions="extattachfile" showHeader="false" sidebar="false" docType="html-5.0"> <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <style type="text/css"> h1 {font-size: 150%; font-weight: bold;} h2 {font-size: ;} p { width:100%; font-size: 120%; text-align: justify; text-justify: inter-word;} .reddot {color: red; font-size:120%;} .textarea { height:200px; width:300px; border-radius: 5px;} .url {width:300px;} .title {font-size:175%;} .standard {width: 310px;} @media only screen and (min-width: 900px) { /* For desktop: */ p { width:890px; font-size: 120%; text-align: justify; text-justify: inter-word;} } .color { background-color: #F7F6D2; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } </style> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"/> <apex:includescript value="{!$Resource.jQuery}"></apex:includescript> <apex:includescript value="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"></apex:includescript> <apex:includescript value="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.0.0.min.js"></apex:includescript> <apex:includescript value="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></apex:includescript> <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"/> </head> <script> $ = jQuery.noConflict(); $(document).ready(function() { $('[id$=artistform]').validate(); $('[id$=chiname]').rules("add",{ required: true, }); $('[id$=email]').rules("add",{ required: true, email: true }); /* Customised the messages */ jQuery.validator.messages.required = "<label style='color:red'>This field is required</label>"; }); </script> <apex:form styleclass="form" id="artistform"> <apex:pageBlock > <apex:pageMessages /> <div><b class="title">Artist Submission Form</b></div><br/> <br/> <h1>Artist / Group Information</h1> <br/><br/> <div class="standard"> <h2>Artist / Group Name (Chinese)</h2><br/> <apex:outputText styleClass="reddot" value="*"/> <apex:panelGroup styleClass="col02 requiredInput" layout="block"> <apex:panelGroup styleClass="requiredBlock" layout="block"/> <apex:inputText value="{!artist.Artist_Group_Name_Chinese__c}" id="chiname"/ > <apex:outputlabel id="op2" /> </apex:panelGroup> <br/> </div> <br/> <div class="standard"> <h2 >Artist / Group Name (English)</h2><br/> <apex:outputText styleClass="reddot" value="*"/> <apex:panelGroup styleClass="col02 requiredInput" layout="block"> <apex:panelGroup styleClass="requiredBlock" layout="block"/> <apex:inputField value="{!artist.Artist_Group_Name_English__c}" label="" id="engname"/> </apex:panelGroup> <br/> </div> <br/> <div class="standard"> <h2 >Artist / Group Biography (Chinese)</h2><br/> <apex:outputText styleClass="reddot" value="*"/> <apex:panelGroup styleClass="col02 requiredInput" layout="block"> <apex:panelGroup styleClass="requiredBlock" layout="block"/> <apex:inputField value="{!artist.Artist_Group_Biography_Chinese__c}" label="" styleClass="textarea" id="chibio"/> </apex:panelGroup> <br/> </div> <br/> <div class="standard"> <h2 >Artist / Group Biography (English)</h2><br/> <apex:outputText styleClass="reddot" value="*"/> <apex:panelGroup styleClass="col02 requiredInput" layout="block"> <apex:panelGroup styleClass="requiredBlock" layout="block"/> <apex:inputField value="{!artist.Artist_Group_Biography_English__c}" label="" styleClass="textarea" id="engbio"/> </apex:panelGroup> <br/><br/> </div> <br/> <div class="heading"> <h1>Name and Roles of Group Members (if applicable)</h1> <br/> <br/><br/> </div> <br/> <div class="standard"> <h2>Name and Roles of Group Members</h2><br/> <apex:outputText styleClass="reddot" value=""/><br/> <apex:inputField value="{!artist.Member_Name_Role__c}" label="" styleClass="textarea"/><br/> <br/> </div> <br/> <div class="standard"> <h2 >Photo of Artist/ Group : max 3 attachments</h2><br/> <apex:outputText styleClass="reddot" value="*"/> <br/> <apex:panelGroup styleClass="col02 requiredInput" layout="block"> <apex:panelGroup styleClass="requiredBlock" layout="block"/> <apex:inputFile value="{!objAttachment.body}" fileName="{!objAttachment.name}" required="false" id="photo"/><br/></apex:panelGroup> <apex:inputFile value="{!objAttachment2.body}" fileName="{!objAttachment2.name}" required="false" /><br/> <apex:inputFile value="{!objAttachment3.body}" fileName="{!objAttachment3.name}" required="false" /> <br/><br/> </div> <br/> <div class="standard"> <h2>Website</h2><outputtext/><apex:outputText styleClass="reddot" value=""/><br/> <apex:inputField value="{!artist.Website__c}" label="" styleClass="url" id="web"/><br/> <br/> </div> <br/> <div class="standard"> <h2 >Facebook</h2><apex:outputText styleClass="reddot" value=""/><br/> <apex:inputField value="{!artist.Facebook__c}" label="" styleClass="url" id="facebook"/><br/> <br/> </div> <br/> <div class="standard"> <h2 >SoundCloud</h2><apex:outputText styleClass="reddot" value=""/><br/> <apex:inputField value="{!artist.SoundCloud__c}" label="" styleClass="url" id="soundcloud"/><br/> <br/> </div> <br/> <div class="standard"> <h2 >YouTube</h2><apex:outputText styleClass="reddot" value=""/><br/> <apex:inputField value="{!artist.YouTube__c}" label="" styleClass="url" id="youtube"/> <br/> </div> <br/><br/> <div class="standard"> <h2>Technical Rider: max 1 attachment</h2><br/> <apex:outputText styleClass="reddot" value=""/><br/> <apex:inputFile value="{!objAttachmentt.body}" fileName="{!objAttachmentt.name}" /><br/> </div> <br/> <div class="standard"> <h2>Stage Plot: max 1 attachment</h2> <br/> <apex:outputText styleClass="reddot" value=""/><br/> <apex:inputFile value="{!objAttachments.body}" fileName="{!objAttachments.name}" required="false" /><br/><br/> </div> <br/> <div class="heading"> <h1>Contact Information </h1> <br/><br/> </div> <br/> <div class="standard"> <h2>Contact Person </h2><apex:outputText styleClass="reddot" value="*"/><br/> <apex:panelGroup styleClass="col02 requiredInput" layout="block"> <apex:panelGroup styleClass="requiredBlock" layout="block"/> <apex:inputField value="{!artist.Contact_Person__c}" label="" id="contactperson"/> <br/> </apex:panelGroup> </div> <br/> <div class="standard"> <h2 >Contact No. </h2><apex:outputText styleClass="reddot" value="*"/><br/> <apex:panelGroup styleClass="col02 requiredInput" layout="block"> <apex:panelGroup styleClass="requiredBlock" layout="block"/> <apex:inputField value="{!artist.Contact_Number__c}" label="" id="contactno"/> <br/> </apex:panelGroup> </div> <br/> <div class="standard"> <h2>Email </h2><apex:outputText styleClass="reddot" value="*"/><br/> <apex:panelGroup styleClass="col02 requiredInput" layout="block"> <apex:panelGroup styleClass="requiredBlock" layout="block"/> <apex:inputField value="{!artist.Email__c}" label="" id="email"/> <br/> </apex:panelGroup> </div> <br/> <br/> <div> <apex:commandButton action="{!save}" value="Save"/> </div> <script> var addclass = 'color'; var $cols = $('.standard').click(function(e) { $cols.removeClass(addclass); $(this).addClass(addclass); }); </script> </apex:pageBlock> </apex:form> <apex:pageMessages /> </apex:page>

August 16, 2016
·
Like
0
·
Dislike
0

Scott Haleo 4
Yes there is a problem with script.

Try to customize as per this below link
http://sfdcsrini.blogspot.com/2016/04/jquery-validatior.html.

And you can add error message with in script.

Regards,
Scott Haleo

August 16, 2016
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

How to achieve validation by jQuery in Visualforce?

All Answers

You need to sign in to do that.