Question

我正在使用jQuery Validation脚本验证表单上的三个选择列表。

我遇到的问题是它只在第一个select列表上工作。这是我用于第一个选择列表的jQuery代码，其名称和ID为Department，第一个option的值为0：

$(document).ready(function () {
$('#form1').validate({ // initialize the plugin
    rules: {
        Department: {
            selectcheck: true
        }
    }
});

jQuery.validator.addMethod('selectcheck', function (value) {
    return (value != '0');
}, "required");
});

第二个select列表，其名称和ID为FBType，第一个option的值为0，这是代码：

$(document).ready(function () {

$('#form1').validate({ // initialize the plugin
    rules: {
        FBType: {
            selectcheck: true
        }
    }
});

jQuery.validator.addMethod('selectcheck', function (value) {
    return (value != '0');
}, "required");
});

任何人都可以看到为什么第二个选择列表不起作用。我提交的表格没有任何错误。

Answer 1

当你不需要时，你正在复制代码。

试试这个：

  $(document).ready(function() {
    $('#form1').validate({ // initialize the plugin
      rules: {
        Department: {
          selectcheck: true
        },
        FBType: {
          selectcheck: true
        }
      }
    });

    jQuery.validator.addMethod('selectcheck', function(value) {
      return (value != '0');
    }, "required");
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>

<form id="form1">
  <select name="Department">
    <option value='0'>Department select...</option>
    <option value='1'>option 1</option>
    <option value='2'>option 2</option>
  </select>
  <br />
  <select name="FBType">
    <option value='0'>FBType select...</option>
    <option value='1'>option 1</option>
    <option value='2'>option 2</option>
  </select>
  <br />
  <input type="submit" value="Submit" />
</form>

Answer 2

这是因为$('#form1').validate({...应该用于一次整个表单上的初始化插件。您不会为每个输入调用.validate()，也不能。该插件仅使用第一个实例，并将忽略所有其他实例。

您也不需要多次拨打.addMethod()。致电jQuery.validator.addMethod('selectcheck',...后，selectcheck方法已创建，可以多次使用。

$(document).ready(function() { jQuery.validator.addMethod('selectcheck', function(value) { // create new rule return (value != '0'); }, "required"); $('#form1').validate({ // initialize the plugin on "#form1" rules: { Department: { selectcheck: true }, FBType: { selectcheck: true } } }); });

DEMO：http://jsfiddle.net/03rrL727/

注意：使用正确的HTML标记，您无需编写自定义方法来生成<select>。第一个<option>只需要一个value=''属性;然后使用required规则。

<select name="Department"> <option value=''>please select...</option> <option value='1'>option 1</option> <option value='2'>option 2</option> </select>

DEMO 2：http://jsfiddle.net/03rrL727/1/

jQuery选择列表验证

2 个答案: