Jquery 仅在一个字段为空时验证

Question

我正在处理我认为棘手的 jquery 验证情况。

我遇到一种情况，我需要仅在一个字段为空时才需要抛出错误。

<div class='row'>
<div class='col-sm-3'>
    <div class='form-group'>
        <label for="arrivalDate">Assignment Start</label>
            <input type="text" class="form-control" id="arrivalDate" placeholder="mm/dd/yyyy" value="" name="arrivalDate" />
    </div>
</div>

<div class='col-sm-3'>
    <div class='form-group'>
        <label for="assignmentEnd">Assignment End</label>
            <input type="text" class="form-control" id="assignmentEnd" placeholder="mm/dd/yyyy" value="" name="assignmentEnd" />
    </div>
</div>

那么，我希望发生的事情是：

如果assignmentEnd 字段中有文本，则arrivalDate 字段不能为空。它应该抛出一条错误消息。

我尝试编写一个验证器，但我认为我做对了：

 $.validator.addMethod("contractCheck",   function(value,element,params) {
        if ((value).val().length != 0) {
            return true;
        }
        return false;
    },
    "Field can't be blank"
);

代码中调用：

      assignmentEnd: {
        contractCheck: "#arrivalDate"
      },  


   assignmentEnd: {
        required: "This can not be blank."
      },

*请注意，我没有这样的名称，我只是想说明我是如何称呼它的。它是正确的格式，可以像其他字段一样被调用和评估。

当我尝试运行这段代码时，它实际上会抛出错误，但会提交表单（这不应该发生），所以我无法查找错误消息。

Answer 1

您可以使用 input 事件来检查 #assignmentEnd 元素 .value 是否有效，如果为真则为 #arrivalDate 和 [= 设置 required 属性14=] 元素，否则删除带有 .attr()、.removeAttr()

的 required 属性

$("#assignmentEnd").on("input", function() {
  if (this.value.length && this.checkValidity()) {
    $(this).add("#arrivalDate").attr("required", "required")
  } else {
    $(this).add("#arrivalDate").removeAttr("required")
  }
})

:invalid + label:after {
  content: "Field cannot be blank";
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class='row'>
    <div class='col-sm-3'>
      <div class='form-group'>
        <label for="arrivalDate">Assignment Start</label>
        <input type="text" class="form-control" id="arrivalDate" placeholder="mm/dd/yyyy" value="" name="arrivalDate" pattern="^\d{2}\/\d{2}\/\d{4}$"/>
        <label></label>
      </div>
    </div>

    <div class='col-sm-3'>
      <div class='form-group'>
        <label for="assignmentEnd">Assignment End</label>
        <input type="text" class="form-control" id="assignmentEnd" placeholder="mm/dd/yyyy" value="" name="assignmentEnd" pattern="^\d{2}\/\d{2}\/\d{4}$"/>
        <label></label>
      </div>
    </div>
  </div>
  <input type="submit">
</form>

Answer 2

I have a situation in which I need will need an error thrown only if one field is blank.

除了使用 dependency 函数在第二个字段上声明 required 规则外，您不需要编写自定义规则或执行任何操作。

$('#yourform').validate({
    rules: {
        assignmentEnd: {
            required: function(element) { 
                // required ONLY when other field is NOT blank
                return $('#arrivalDate').is(':filled');
            }
        }
    }
});

演示：jsfiddle.net/nwfyngwq/

Jquery 仅在一个字段为空时验证

Jquery Validation only when one field is blank

javascript

jquery

jquery-validate