为什么此 jquery 验证规则不起作用？

Question

我已经为跟随 select-box 创建了一个 jquery 验证规则，但它不起作用。这是我所做的；

<select id="qual">
  <option value="">Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

我的规则如下 -

  $.validator.addMethod("qual", function(value, element, arg){

    return arg != value;
   }, "Please select a qualification.");

 $("#profile-form").validate({
    rules: {
     eduQualification:{
        qual: ""
      },
   }
)};

问题是，即使我从 select 框中输入 select "Choose ..."，它也不会闪烁错误消息。

并在提交表单时；即使 jquery 验证返回了一些错误，它也会被提交。我调用了 preventDefault();然而，它似乎也失败了..

$(document).on('click', 'form button[type=submit]', function(e) {
            var isValid = $(e.target).parents('profile-form').isValid();

            if(!isValid) {
              e.preventDefault(); //prevent the default action
            } else{

            }
        });

Answer 1

qual 规则应该完成什么？通常，select 只需要 required 规则，因为用户只能进行选择，而无法控制所选值的格式。
您的 rules 对象以 eduQualification 元素为目标，但您没有此 name 元素。
.validate() 的右大括号反了。应该是 }); ... 如 .validate({...});

您的 select 必须包含 name 属性，否则插件将完全无法工作；并且它必须是 name="eduQualification" 因为你在 rules 对象中声明它的方式。

$("#profile-form").validate({
    rules: {
        eduQualification: { // <- this is the NAME
            qual: ""        // <- this is the METHOD
            ....

HTML: <select name="eduQualification" id="qual">.....

要简单地更改消息，请按如下方式使用 messages 对象...

<select name="foo">
    <option value="">Choose...</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

jQuery:

$(document).ready(function() {

    $("#myform").validate({
        rules: {
            foo: {
                required: true
            }
        },
        messages: {
            foo: {
                required: "Please select a qualification."
            }

        }
    });

});

工作演示：http://jsfiddle.net/773Lozwz/

为什么此 jquery 验证规则不起作用？

Why does this jquery validate rule not work?

jquery

jquery-validate