JQuery 验证器不适用于选择输入

JQuery validator does not work with select input

本文关键字：选择 输入 适用于 不适用 验证 JQuery      更新时间：2023-09-26
<select name="child_class" class="drop-select-2">
    <option value="" >Choose...</option>
    <option value="1" >1</option>
    <option value="2" >2</option>
</select>

我有这个选择。我想在我的表单上使用jQuery验证器，但不允许选择"选择..."选择。我已经阅读了很多具有相同问题的堆栈溢出问题，并且到处都是 value=" 使它。但就我而言，它不起作用，验证器根本不验证此输入。为什么？

在验证器规则中，我有：

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

怎么了？

它在这里工作正常 -> 工作小提琴

<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();          
        }
    });

与@jQuery.PHP.Magento.com的答案基本相同，它的工作原理是：

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>

您的代码与您呈现的代码完全相同。

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>

j查询：

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

演示：http://jsfiddle.net/x21hnemb/

相关文章：