立即触发 JQuery 多个元素的验证

Question

我有四个要素，每个要素都与其他要素有关有效性。例如，元素是 a、b、c 和 d。如果 d 为空，则用户必须为 a、b、c 输入一些值，如果 a、b、c 为空，则用户必须为 d 输入一些值。我创建了一个自定义验证，如您在代码片段中所见，但它自然只检查聚焦输入，因此如果您在 a、b 和 c 上提供一些值，它只会验证 c，而对于 a 和 b，您必须再次聚焦它们。我希望此验证同时触发所有这些输入，如果它 returns 为真，则声明所有其他输入有效。你能帮帮我吗？

编辑一个更好的例子：当第一次点击提交按钮时，它会显示所有输入无效，因为它们是空的。将一些值放在 d 上足以验证表单，因此当我将一些值放在 d 上并从中移出焦点时，我希望所有输入都更新为有效。

谢谢。

(function ($) {
        $.validator.addMethod('adreskontrol', function (value, element) {
            
            if ($("#d").val() == "" && ($("#a").val() == "" || $("#b").val() == "" || $("#c").val() == "")) {
                return false;
            }
            else {
                return true;
            }
        });

    }(jQuery));


    $.validator.unobtrusive.adapters.addBool('adreskontrol');

$('#btn').click(function() {
    if($("#test").valid() === false) {
        //What to do if validation fails
    } else if($("#test").valid() === true) {
        //Show the preview and let the user either make changes or submit the final result
    }
});

.input-validation-error
{
border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.10/jquery.validate.unobtrusive.min.js"></script>



<form id="test">
   a:  <input type="text" name="testa" class="testa" id="a" data-val-adreskontrol = "checka" data-val = "true">
<label for="testa"></label>
</br>
   b:  <input type="text" name="testb" class="testa" id="b" data-val-adreskontrol = "checkb" data-val = "true">
<label for="testb"></label>
</br>
   c:  <input type="text" name="testc" class="testa" id="c" data-val-adreskontrol = "checkc" data-val = "true">
<label for="testc"></label>
</br>
   d:  <input type="text"  name="testd" class="testa" id="d" data-val-adreskontrol = "checkd" data-val = "true">
<label for="testd"></label>
</br>
<input type="submit" id="btn" value="Test"/>

</form>

Answer 1

为所有添加相同的 class，然后尝试计算错误数。

     if ($('.class_name').length > 0) {
}

Answer 2

我通过重新检查 keyup 上的任何输入的表单验证来处理它，如下所示：

(function ($) {
        $.validator.addMethod('adressCheck', function (value, element) {
            
            if ($("#d").val() == "" && ($("#a").val() == "" || $("#b").val() == "" || $("#c").val() == "")) {
                return false;
            }
            else {
                return true;
            }
        });

    }(jQuery));


    $.validator.unobtrusive.adapters.addBool('adressCheck');

   $(".adressInput").on("keyup", function () {
        $("#testForm").valid();
  });
    
    
  $('#btn').click(function() {
      if($("#testForm").valid() === false) {

      } else if($("#testForm").valid() === true) {

      }
  });

.input-validation-error
{
border:1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.10/jquery.validate.unobtrusive.min.js"></script>



<form id="testForm">
   a:  <input type="text" name="testa" class="adressInput" id="a" data-val-adressCheck = "checka" data-val = "true">
<label for="testa"></label>
</br>
   b:  <input type="text" name="testb" class="adressInput" id="b" data-val-adressCheck = "checkb" data-val = "true">
<label for="testb"></label>
</br>
   c:  <input type="text" name="testc" class="adressInput" id="c" data-val-adressCheck = "checkc" data-val = "true">
<label for="testc"></label>
</br>
   d:  <input type="text"  name="testd" class="adressInput" id="d" data-val-adressCheck = "checkd" data-val = "true">
<label for="testd"></label>
</br>
<input type="submit" id="btn" value="Test"/>

</form>

立即触发 JQuery 多个元素的验证

Trigger JQuery validation for multiple elements instantly

html

javascript

validation

jquery

unobtrusive-validation