0

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

3
  • We need to see the HTML of your select element. Commented Feb 9, 2015 at 15:58
  • 1
    "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. Commented Feb 9, 2015 at 16:02
  • 1
    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 :) jqueryvalidation.org/validate#rules Commented Feb 9, 2015 at 16:10

1 Answer 1

1

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

});
Sign up to request clarification or add additional context in comments.

1 Comment

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!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.