JQuery Validation on a Bootstrap Form in Salesforce?

Question

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>

Answer 1

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

Answer 2

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']")

Answer 3

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.