Jquery Validation 适用于一些但不是所有的文本输入

Question

我第一次使用 jquery 验证插件...它在我的表单中的某些输入上正常工作（在下面进行了简化），但在其他输入上却没有。知道为什么吗？在下面的示例中，验证适用于第一个输入#planname，但不适用于#q8b。

---

<form id="form">

   <fieldset>
    <legend>Plan Name</legend>
    <span><input id="planname" type="text" name="planname" value="<?php echo $_SESSION['planname']; ?>" required class="required" /></span>
    </fieldset>

    <fieldset class="childwrap" id="q8bwrap">
    <legend>Do you have an outstanding loan?</legend>
    <input id="q8b" type="text" name="q8b"   value="<?php if ($_SESSION['q8a'] == "Yes") {echo $_SESSION['q8b']; } ?>"/>%<br/>
    </fieldset>

</form>

---

包含在页脚中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="http://cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script>

<script src="http://cdn.jsdelivr.net/jquery.validation/1.13.1/additional-methods.min.js"></script>

---

此脚本有效：

<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#form" ).validate({
  rules: {
    planname: {
      required: true,
      max: 23
    }
  }
});
</script>

---

这个没有：

<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#form" ).validate({
  rules: {
    q8b: {
      required: true,
      max: 23
    }
  }
});
</script>

这只是为了测试目的，试图找出它不起作用的原因；在最终产品中，q8b 应该不是必需的，但最大值应为 23。

Answer 1

这两个脚本都适合我。我用第二个脚本创建了这个，一切看起来都很好。也许您正在脚本的其他地方更改其他内容（未在您的问题中显示）导致问题？

// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#form" ).validate({
  rules: {
    q8b: {
      required: true,
      max: 23
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.13.1/additional-methods.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script>

<form id="form">

   <fieldset>
    <legend>Plan Name</legend>
    <span><input id="planname" type="text" name="planname" value="0" required class="required" /></span>
    </fieldset>

    <fieldset class="childwrap" id="q8bwrap">
    <legend>Do you have an outstanding loan?</legend>
    <input id="q8b" type="text" name="q8b" value="0"/>%<br/>
    </fieldset>

</form>

Answer 2

你是在一个接一个地调用你的两个脚本吗？

$( "#form" ).validate({
  rules: {
    planname: {
      required: true,
      max: 23
    }
  }
});

$( "#form" ).validate({
  rules: {
    q8b: {
      required: true,
      max: 23
    }
  }
});

如果是这样，那么它解释了为什么第二个不起作用。

.validate() 方法用于初始化表单上的插件，并且只能在特定的form 元素上调用一次。所有后续调用都将被忽略。

对于多个字段，您可以这样使用它...

$("#form").validate({
    rules: {
        planname: {
            required: true,
            max: 23
        },
        q8b: {
            required: true,
            max: 23
        }
    }
});

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

---

如果您已经在 rules 方法的 rules 对象内声明了 required 规则，则不需要内联 required 属性或 class="required"。以三种不同的方式声明相同的规则是多余的，只会让代码更难以后维护。

Answer 3

感谢您的帮助，伙计们 - 这是我的一个错误。我的表单使用 Bootstrap，而我忽略了将列嵌套在一行中 - 这会“破坏”页面并阻止验证正常工作。