+ Start a Discussion
Alex Wong 4Alex Wong 4 

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.
Best Answer chosen by Alex Wong 4
Scott Haleo 4Scott 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

All Answers

Scott Haleo 4Scott 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
This was selected as the best answer
Alex Wong 4Alex 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.
Scott Haleo 4Scott Haleo 4
Hi Alex,

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

Thanks. :)

Scott Haleo
Alex Wong 4Alex 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>

 
Scott Haleo 4Scott 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