jQuery validate 只验证一个字段答案

【问题标题】：jQuery validate only validates one fieldjQuery validate 只验证一个字段
【发布时间】：2011-05-11 22:37:22
【问题描述】：

我正在使用 jQuery validate 来验证表单。我的表单上有两个文本框，只有第一个会添加“此字段是必需的”。信息。如果我从第一个中删除“必需”类，第二个将有消息。

html:

<form id="questionForm">
<div><input class="required" id="value" type="text" /></div>
<div><textarea class="required" id="description"></textarea></div>
<button type="submit">Save</button>
</form>

javascript：

$("#questionForm").validate({ submitHandler: function() { 
        alert("valid");
    } 
});

为什么只有一个被验证？

编辑：我正在使用 jQuery 验证插件 1.7

编辑 2：我正在使用 MVC 3

【问题讨论】：

标签： javascript jquery jquery-validate

【解决方案1】：

我自己也遇到了这个问题。拉了我一个小时的头发，但这里是：

也可以在其中添加“name”属性，这可能会奏效。

【讨论】：

我的意思是进入你的输入字段。 :)
老兄，谢谢！因为这个，我的头差点撞在键盘上。
只为一个简单的问题就花了一个小时调试我的表单！检查我的代码的每一个字母，我都快把眉毛烧焦了！非常感谢！
非常感谢，如果我没有找到这个文档，我会浪费时间阅读文档
非常感谢。在看到这个答案之前花了一天时间。

【解决方案2】：

您必须为要使用 Jquery.validate() 函数验证的每个 DOM 元素输入 name 属性。

【讨论】：

【解决方案3】：

在不知道您使用的是什么验证插件的情况下，很难确定问题所在。但是，似乎 jQuery 并没有遍历每个字段，而是在到达无效字段时停止。尝试使用 jQuery $.each() 方法，并使用一些条件来确保验证过程不会在验证器到达无效字段时停止。

希望对您有所帮助，
spryno724

【讨论】：

【解决方案4】：

我认为警报阻止了这两个字段的验证。在 1 次警报之后，其余的 javascript 停止。如果你改用$('#questionForm').validate(); 会发生什么？

【讨论】：

不，不是这样。我尝试了您的建议，还删除了 alert() ，但它没有用。我认为提交处理程序是一个回调函数，因此在验证表单之前不会调用它。
我也不确定，但我遇到的问题不止一次循环被警报停止。不知道为什么，因为它不应该返回任何东西。
我从文档中得到的你是对的：它似乎应该在验证表单时调用（默认情况下它只是 form.submit();

【解决方案5】：

确保您在必填字段中添加了 name 属性

$(document).ready(function() {
  $("#basic-form").validate({
  // comment it out if you want to hide error messgae below inputfield
    /*errorPlacement: function (error, element) {
      return true;
    }*/
  // Call once form is valid
  submitHandler: function (form) {
    alert('Done');
  }
  });
});

body {
  margin: 20px 0;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 1.25rem;
  width: 300px;
}

form, p {
  margin: 20px;
}

p.note {
  font-size: 1rem;
  color: red;
}

input {
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 4px;
  font-family: 'Lato';
  width: 300px;
  margin-top: 10px;
}

label {
  width: 300px;
  font-weight: bold;
  display: inline-block;
  margin-top: 20px;
}

label span {
  font-size: 1rem;
}

label.error {
    color: red;
    font-size: 1rem;
    display: block;
    margin-top: 5px;
}

input.error {
    border: 1px dashed red;
    font-weight: 300;
    color: red;
}

[type="submit"], [type="reset"], button, html [type="button"] {
    margin-left: 0;
    border-radius: 0;
    background: black;
    color: white;
    border: none;
    font-weight: 300;
    padding: 10px 0;
    line-height: 1;
}

<body>
<!-- partial:index.partial.html -->
<form id="basic-form" action="" method="post">
    <p>
      <label for="name">Name:</label>
      <input id="name" name="name" minlength="3" type="text" required>
    </p>
    <p>
      <label for="email">E-Mail <span>(required)</span></label>
      <input id="email" type="email" name="email" required>
    </p>
    <p>
      <input class="submit" type="submit" value="SUBMIT">
    </p>
</form>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js'></script>

</body>

【讨论】：