JQuery validator does not work with select input

Question

<select name="child_class" class="drop-select-2">
    <option value="" >Choose...</option>
    <option value="1" >1</option>
    <option value="2" >2</option>
</select>

I have this select. I want to use jQuery validator on my form and not allow to select "Choose..." option. I have read a lot of stackoverflow question with the same problem and everywhere is that value="" makes it. But in my case it does not work, validator simply does not validate this input. Why is that?

In validator rules I have:

rules: {
   child_class:       'required'
   ...
}

What is wrong?

Show us enough code to reproduce the problem. Your code is working. http://jsfiddle.net/db138t4y/ — Sparky, Feb 04 '15 at 16:56

score 1 · Answer 1 · answered Feb 04 '15 at 12:38

It works properly here -> Working FIDDLE

<form name="test" id="test">
<select name="child_class" class="drop-select-2">
    <option value="" >Choose...</option>
    <option value="1" >1</option>
    <option value="2" >2</option>
</select>
    <input type="submit"/>
</form>

// validate edit Category form when it is submitted
    jQuery("#test").validate({
        errorElement: 'div',
         errorClass:'errorjQuery',      
        rules: {

            'child_class': {
                required: true                  
            }                           
        },
        messages: {

            'child_class': {
                required: "Please choose 1 value.",
            }               
        },
        errorPlacement: function(error, element) {
            error.appendTo(  element.parent()  );
            $(".error-message").remove();           
        },

        submitHandler: function(form) {
            jQuery('input[type=submit]', form).attr('disabled', 'disabled');            
            idd = form.attr("id");          
            form.submit();          
        }
    });

You might have forgotten to use
tag naming or giving name attribute of other tags. — Pratik Joshi, Feb 04 '15 at 12:41

Matteo B. · Answer 2 · 2015-02-04T12:46:55.820

Essentially the same as @jQuery.PHP.Magento.com's answer, it works:

jQuery(window).ready(function() {
  jQuery('#your_form').validate({
    rules: {
      child_class:       'required'
    },
    submitHandler: function(form) {
      alert('k');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script>

<form id="your_form">
  <select name="child_class" class="drop-select-2">
    <option value="" >Choose...</option>
    <option value="1" >1</option>
    <option value="2" >2</option>
  </select>
  
  <button type="submit">Send</button>
</form>

Sparky · Answer 3 · 2015-02-04T17:04:00.980

Your code works exactly as you've presented it.

HTML:

<form id="myform">
    <select name="child_class" class="drop-select-2">
        <option value="">Choose...</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <input type="submit" />
</form>

jQuery:

$(document).ready(function () {

    $("#myform").validate({
        rules: {
            child_class: 'required'
        }
    });

});

DEMO: http://jsfiddle.net/x21hnemb/

JQuery validator does not work with select input

3 Answers3