Question

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

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

Answer 1

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

也在那里抛出“name”属性，这可能会有所帮助。

Answer 2

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

Answer 3

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

希望有所帮助，
spryno724

Answer 4

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

Answer 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>

jQuery验证仅验证一个字段

5 个答案: