I'm running into an issue where I'm using the Jquery Validation Plugin to help validate some fields in a visualforce page so I can make sure it looks nice, and so I can control the errors and parameters.

When I try this however I don't seem to be getting any results, no errors, no highlighting, nothing.

Using Bootstrap if it makes any difference:


<form class="form-horizontal" id="contentForm">
    <div class="form-group col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <label for="contentName">Content Name</label>
        <apex:inputText id="contentName" styleClass="form-control" value="{!contentName}"/>

        <apex:inputHidden value="{!contentType}" id="hiddencontentType"/>
        <label for="contentType">Choose the type of content</label>
        <select Class="form-control" id="contentType" value="{!contentType}" onpageshow="document.getElementById('{!$Component.hiddencontentType}').value = this.value; visibleCheck();" onload="visibleCheck();" onchange="document.getElementById('{!$Component.hiddencontentType}').value = this.value; visibleCheck();">

            <option value="Custom Production - Video">Custom Production - Video</option>
            <option value="Custom Production - Avatar">Custom Production - Avatar</option>
            <option value="BYOC - Video">BYOC - Video</option>
            <option value="BYOC - Document to Exam">BYOC - Document to Exam</option>
            <option value="Scorm Video">Scorm Video</option>


        <div class="form-group" id="VideoMinutes">
        <label for="contentMinutes" >Minutes of content to produce</label>
        <apex:inputText id="contentMinutes" styleClass="form-control" value="{!contentMinutes}"/>
        <span id="errorMessage_Minutes" class="help-block hidden">Please make sure that the amount of minutes is less than 20.</span>

        <div class="form-group" id="Questions">
        <label for="contentQuestions">Number of questions to produce</label>
        <apex:inputText id="contentQuestions" styleClass="form-control" value="{!Questions}"/>
        <br />
        <apex:commandButton styleClass="btn btn-primary" action="{!addContent}" value="Add Custom Content" reRender="customContentList,priceTable"/>                


                $( '#contentForm' ).validate({ 
                rules: {
                    'contentMinutes': {
                        required: true,
                        range: [1, 20]
                messages: { 
                    'contentMinutes': {
                        required: "This Field cannot be Blank",
                        range: "Only numbers between 1 and 20 are accepted"
  • If you view the source of your page you will see that the id value "contentMinutes" gets prefixed automatically by Visualforce which is one potential source of the problem.
    – Keith C
    Feb 12, 2016 at 20:56

3 Answers 3


The id attribute of apex:inputText will be used to generate a unique id on the HTML element, but it won't be the actual id. Usually it's something like i0:j0:contentMinutes.

In order to get the generated id, you need to use the $Component global merge field. So it would be something like {!$Component.contentMinutes}.

See the $Component documentation in the Salesforce Help for more information.

Also, please add the html-aria-describedby attribute to your apex:inputText to properly associate the error messages to your inputs for assistive technologies, for accessibility purposes. This ensures that the messages will be properly announced to screen readers. For example:

<apex:inputText id="contentMinutes" styleClass="form-control" 
  value="{!contentMinutes}" html-aria-describedby="errorMessage_Minutes" />

Run the validate against the Jquery Ends With selector instead of the one you are using. The actual rendered ID of the field will have a Salesforce pretended ID that won't match the selector you are using. Salesforce will insert your id at the end, thus why I prefer the ends with selector.



HTML5 form validation could also be a solution for what you're doing, depending on what browsers, and the versions of those browsers, that you need to support.

  • I wasn't aware that was something available in HTML5, do you know of any resources that cover this? Feb 14, 2016 at 23:51

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .