3

I am creating a form in Visualforce. Since my form is a bit long, it is hard for users to remember the error message at the top and revise it. On top of the error message, I want to create a validation when users typing in their information.

For example, there are 2 field, users name and email. Users cannot leave the name field blank, if so, I want to show a message of "This field is required to fill in" beside the field. And for email field, I want to have another message to remind users to insert a valid email.

Is there anyway in visualforce to do so? Thanks for your help.


Here is my updated visualforce code:

<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>
  • I take it you're not using a custom controller? What have you tried? JavaScript or jQuery could be one route. – Dan Jones Aug 15 '16 at 9:01
  • I have found one page, th3silverlining.com/2010/03/02/…. But I have faced problem that nothing occured... And I will update more information by editing. – alexwong820 Aug 15 '16 at 9:13
  • Even I follow the format from the link, it still doesn't work. Is there any problem for the script source? Or static resources? – alexwong820 Aug 15 '16 at 9:21
3

The article you linked in the comment seems to be referencing <apex:inputText> tags which differ slightly from <apex:inputField> in that the latter directly references a field, or as Salesforce better put it:

An HTML input element for a value that corresponds to a field on a Salesforce object.

The former could be anything.

Assuming you're not using a custom controller, one option is to use jQuery in your Visualforce page.

Assuming you have two fields and a button like below:

<apex:inputField id="contactName" value="{!Contact.Name}" />
<apex:inputField id="contactEmail" value="{!Contact.Email}" />
<apex:commandButton id="submitButton" action="{!save}" value="Save"/>

You can reference the Ids using $Component.fieldId.

For example:

$(document).ready(function() {
    var name = {!$Component.contactName};
    var email = {!$Component.contactEmail};
    var submit = {!$Component.submitButton};
    var errors = [];

    submit.click(function(e) {
        if (name.val().length() > 32 || email.val().length() > 64) {
            errors.push['A field is too long.'];
        }

        // More validation...

        if (errors.length > 0) {
            e.preventDefault();
        }
    });
});

Edit

Based on your comment, one option could also be to simply use HTML 5 validation. As long as you include docType="html-5.0" in the <apex:page> tag, you can use things like html-type="email" or html-required in the <apex:inputField>.

As an example:

<apex:inputField value="{!artist.Email__c}" label="" id="email" html-type="email" html-required="true" />

This would validate on the fly, by the field, as you want.

Edit

Turns out required is standard so html-required does nothing.

I wrote a basic Visualforce Page as below which compiled and saved successfully:

<apex:page>
    <apex:form>
        <apex:inputText required="true" />
    </apex:form>
</apex:page>
  • I have try a simple one on salesforce, but it still not work... <apex:page docType="html-5.0"> <apex:form > <apex:inputText required="true" html-aria-described‌​by="show"/> <span id="show">HI!</span> </apex:form> </apex:page> result: Error: test line 3, column 60: Attribute name "html-aria-described" associated with an element type "apex:inputText" must be followed by the ' = ' character Error Error: Attribute name "html-aria-described" associated with an element type "apex:inputText" must be followed by the ' = ' character. – alexwong820 Aug 16 '16 at 9:52
  • @alexwong820 You might want to put that question in another SFSE question as this comment section is getting too long. :) – Dan Jones Aug 16 '16 at 9:59
  • Comments are not for extended discussion; this conversation has been moved to chat. – Matt Lacey Aug 17 '16 at 0:32
  • Is there any good example code to enable visualforce+bootstrap to perform html 5 validations? Thanks in advance. – PsnE Jul 27 '17 at 13:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.