0

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:

Visualforce:

<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>

        </select>                                                                               

        <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>

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

Javascript/Jquery:

<script>
            $(document).ready(function(){                   
                $( '#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"
                    }
                } 
                });
            });
</script>
1
  • 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

5

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" />
1

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.

$("[id$='contentForm']")

1

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.

1
  • 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

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.