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是否有效，如果required和{{1}都设置为#arrivalDate属性}元素，否则使用#assignmentEnd，required

删除.attr()属性

.removeAttr()

$("#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;
}

Answer 2

我遇到的情况是，只有当一个字段为空时，我才需要抛出错误。

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

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

DEMO：jsfiddle.net/nwfyngwq/

仅当一个字段为空时才进行Jquery验证

2 个答案: