Question

我有四个要素，每个要素都与有效性有关。例如，元素是a，b，c和d。如果d为空，则用户必须为a，b，c输入一些值，如果a，b，c为空，则用户必须为d输入一些值。我创建了一个自定义验证，如您在代码段上看到的那样，但是它自然只检查集中输入，因此，如果在a，b和c上给出一些值，它将只验证c，而对于a和b，则必须再次集中它们。我希望此验证为所有这些输入触发相同的时间，如果返回true，则声明所有其他输入均有效。你能帮我吗？

编辑一个更好的例子：第一次单击提交按钮时，它将对所有输入显示为无效，因为它们为空。在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

为所有人添加相同的课程，然后尝试计算错误的数量。

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

Answer 2

我通过重新检查键盘输入的表单验证来处理它，例如：

(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验证

2 个答案: