为什么不对依赖选择进行jquery验证?

时间:2017-06-26 13:39:41

标签: javascript jquery validation

我有依赖选择的表单。我需要jquery validation检查每个选择完成的内容。第二个选择从ajax的服务器获取。

... more fieldes ...
Select Country:
<label for="country"></label><br />
<select id="country" name="country">
    <option value="">Select Country</option>
    <option value="USA">USA</option>
    <option value="Israel">Israel</option>
</select>
<br /> <br />

Select City:
<label for="city"></label><br />
<select id="city" name="city">
    <option value="">Select City</option>
</select>

我的验证:

country: {
    required: true,
    minlength: 2
},
city: {
    required: true,
    minlength: 2
}

但我总是得到不选择案例的结果。如何修复字段countrycity的规则以确保正确的工作。如果选择的某些内容不是默认的,则它是有效的情况,如果某些字段没有为未选择的字段选择它的无效情况。谢谢。

2 个答案:

答案 0 :(得分:1)

您只需在两个select元素上添加类属性required

如下:

<select id="country" name="country" class="required">

请参阅以下示例:

&#13;
&#13;
$("#btnValidate").click(function() {
  console.log("Form is valid:", $("#frm1").valid())
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.min.js"></script>
<form id="frm1">
  Select Country:
  <label for="country"></label><br />
  <select id="country" name="country" class="required">
  <option value="">Select Country</option>
  <option value="USA">USA</option>
  <option value="Israel">Israel</option>
  </select>
  <br /> <br />

  Select City:
  <label for="city"></label><br />
  <select id="city" name="city" class="required">
  <option value="">Select City</option>
  <option value="T1">Test 1</option>
  <option value="T2">Test 2</option>
  </select>
  <p>  
    <input type="button" id="btnValidate" value="Validate">
  </p>
</form>
&#13;
&#13;
&#13;

我希望它可以帮助你,再见。

答案 1 :(得分:0)

检查此示例并让我知道它是否适合您

$("form").validate({
    rules: {
        country: { required: true },
        city: {
            required: {
                depends: function(element) {
                    return $("#country option:selected").val();
                }
            }
        }
    },
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<form>

<select id="country" name="country">
    <option value="">Select Country</option>
    <option value="USA">USA</option>
    <option value="Israel">Israel</option>
</select>

<select id="city" name="city">
    <option value="">Select City</option>
    <option value="Newyork">Newyork</option>
</select>
<input type="submit">
</form>