Jquery 验证适用于部分而非所有文本输入

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/

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

Answer 3

谢谢大家的帮助 - 这是我的错误。我的表单使用 Bootstrap，但我忽略了将我的列嵌套在一行中 - 那是 "breaking" 页面并阻止验证正常工作。

Jquery 验证适用于部分而非所有文本输入

Jquery Validation works on some but not all text inputs

forms

jquery

jquery-validate

包含在页脚中：

此脚本有效：

这个没有：