jQuery Validate plugin with a select element

Question

I'm having an issue using jQuery's Validate plugin to validate select boxes on the site I'm working on.

Does anyone know the correct syntax? Looking at the docs they appear to use inline HTML5 "required" flags on select inputs but I can't find any javascript directly related.

What I've tried so far is:

$('#quick-search').validate({
    vehicletype: {
        required: true
    }
});

...then...

$('#quick-search').validate({
    "vehicletype[]":"required"
});

Nothing seems to happen, and I've even noticed a "novalidate" appearing on my form element for no reason whatsoever!

Thanks in advance, Graham

_"for no reason whatsoever!"_ ~ `novalidate` is put there by the plugin to disable HTML5 validation! You don't want HTML5 validation while the plugin is also doing validation. — Sparky, Feb 09 '15 at 16:02
Seems like it's just a matter of not putting your rule definition inside the `rules: { ... }` block. If you didn't find that in the docs, you didn't look very hard :) http://jqueryvalidation.org/validate#rules — Ryley, Feb 09 '15 at 16:10

score 1 · Accepted Answer · answered Feb 09 '15 at 14:15

You must have done something wrong with syntax .

Working My sample demo

As you didnt provide HTML

<form action="/smudev/CourseCategories/add" autocomplete="off" id="CourseCategoryAddForm" method="post" accept-charset="utf-8" novalidate="novalidate">        
        <!--Div structure-->
        <section class="AddNewForm">


            <section class="formField fullwidth">
                <label>
                    Department:         
                    <span class="starRed"> *</span>                                 
                </label>
                <section class="inputOuter width160">
                    <div class="input select"><select name="data[CourseCategory][department_id]" id="CourseCategoryDepartmentId" class="errorjQuery">
<option value="">(choose one)</option>
<option value="4">Arts</option>
<option value="5">Commerce</option>
<option value="1">Science</option>
<option value="3">Sports</option>
</select></div> 
                </section>
            </section>



            <section class="formField formBTN">
                    <div class="submit"><input name="submit" class="grayBTN" title="" alt="Submit" type="submit" value="Save"></div><button type="button" onclick="redirectFun()" class="grayBTN">Cancel</button>
            </section>            

        </section></form>

jQuery

jQuery(document).ready(function(){
// validate add Category form when it is submitted
    jQuery("#CourseCategoryAddForm").validate({
        errorElement: 'div',
         errorClass:'errorjQuery',      
        rules: {

            'data[CourseCategory][department_id]': {
                required: true
            }   

        },
        messages: {                         
            'data[CourseCategory][department_id]': {
                required: "Please select department."   
            }   

        },
        errorPlacement: function(error, element) {
            error.appendTo( element.parent());          
            //What to do if error occurs
            $(".error-message").remove();
        },

        submitHandler: function(form) {
            jQuery('input[type=submit]', form).attr('disabled', 'disabled');            
            idd = form.attr("id");          
            form.submit();          
        }
    });
// validate edit Category form when it is submitted

});

Got it working! Turns out I had a conflict with the custom select-box plugin. It basically masks the original selectbox element and replaces it with on-the-fly a tags mimicking the functionality. Plugin zapped, code working. Thanks for all your help guys - and especially for the code supplied! — Graham, Feb 10 '15 at 09:31

jQuery Validate plugin with a select element

1 Answers1