如何在jQuery-validate中指定验证字段

Question

我有 2 个字段：姓名查询和出生日期，而姓名查询是必填项，而出生日期不是。我有以下表格在名称查询字段下显示验证消息：

var myForm = $("#myform").validate({
  rules: {
    NameQuery: "required",
    DoBQuery: {
      required: false
    }
  },
  messages: {
    NameQuery: "Please fill in name query field",
    DoBQuery: ""
  }
});

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>


<form id="myform" method="post" action="">
  <div>
    <label for="NameQuery">Name</label>
    <input type="text" id="NameQuery" name="NameQuery">
  </div>
  <div>
    <label for="DoBQuery">Date of Birth</label>
    <input type="text" id="DoBQuery" name="DoBQuery">
  </div>
  <input type="submit" value="Search">
</form>

现在我想为名称查询字段验证消息添加一些样式。代码片段中添加了一些代码，请注意 <div class="error__input"></div> 必须 EXIST IN BOTH FIELDS 就像在片段

中一样

var myForm = $("#myform").validate({
  rules: {
    NameQuery: "required",
    DoBQuery: {
      required: false
    }
  },
  messages: {
    NameQuery: "Please fill in name query field",
    DoBQuery: ""
  },
  errorElement : 'div',
  errorLabelContainer: '.error__input'
});

.error__input{
  min-height: 20px;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<form id="myform" method="post" action="">
  <div>
    <label for="NameQuery">Name</label>
    <input type="text" id="NameQuery" name="NameQuery">
    <div class="error__input"></div>
  </div>
  <div>
    <label for="DoBQuery">Date of Birth</label>
    <input type="text" id="DoBQuery" name="DoBQuery">
    <div class="error__input"></div>
  </div>
  <input type="submit" value="Search">
</form>

现在验证消息存在于两个字段中，我知道 jQuery-validate 找到 error__input div 并将 class 应用于它，但为什么它将消息添加到第二个字段，我如何将警报消息设置为仅适用于第一条消息，而 <div class="error__input"></div> 必须存在？

Answer 1

你想要这样的东西，我猜：

var myForm = $("#myform").validate({
  rules: {
    NameQuery: "required",
    DoBQuery: {
      required: false
    }
  },
  messages: {
    NameQuery: "Please fill in name query field",
    DoBQuery: ""
  }
});

#myform .error {
    display: block;
    color: red;
}

#myform input {
  display: inline;
}

#myform > div {
  height: 50px;
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>


<form id="myform" method="post" action="">
  <div>
    <label for="NameQuery">Name</label>
    <input type="text" id="NameQuery" name="NameQuery" style="display: inline-block;">
  </div>
  <div>
    <label for="DoBQuery">Date of Birth</label>
    <input type="text" id="DoBQuery" name="DoBQuery" style="display: inline-block;">
  </div>
  <input type="submit" value="Search">
</form>

Answer 2

您应该删除出生日期字段后的 <div class="error__input"></div> 标签

Answer 3

您可以使用 errorPlacement 将错误消息放在错误元素旁边。

errorPlacement: function(error,element){
   error.appendTo(element.next(".error__input"));
}

var myForm = $("#myform").validate({
  rules: {
    NameQuery: "required",
    DoBQuery: {
      required: false /* if it is not required, why you put here? You can simply not insert this input field in validate()'s rules. */
    }
  },
  messages: {
    NameQuery: "Please fill in name query field"
  },
  errorElement : 'div',
  errorPlacement: function(error,element){
    error.appendTo(element.next(".error__input"));
  }
});

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<form id="myform" method="post" action="">
  <div>
    <label for="NameQuery">Name</label>
    <input type="text" id="NameQuery" name="NameQuery">
    <div class="error__input"></div>
  </div>
  <div>
    <label for="DoBQuery">Date of Birth</label>
    <input type="text" id="DoBQuery" name="DoBQuery">
    <div class="error__input"></div>
  </div>
  <input type="submit" value="Search">
</form>

如何在jQuery-validate中指定验证字段

How to specify the validated field in jQuery-validate

javascript

jquery

jquery-validate