表单验证与jQuery验证具有相关和独特的表单元素

Question

我有以下结构，在我的项目形式，

<form action="somepage"> 
    <p>Account Number</p> 
    <input type="text" size="3" name="accountNumberOne" class="my-form-group"> 
    <input type="text" size="3" name="accountNumberTwo" class="my-form-group"> 
    <input type="text" size="4" name="accountNumberThree" class="my-form-group"> 
    <span>OR</span> 
    <p>Email ID</p> 
    <input type="email" name="emailId" id="emailId"> 
</form> 

如果用户填写账号或所有3个框的形式将是有效的，电子邮件ID。如果她提交空白，它将显示两个字段的单个错误消息。我知道这可以使用require_from_group和组属性的jQuery验证程序，但我不能够一起实现它们！

任何帮助，将不胜感激！

Answer 1

你可以使用下面的简单例子。如果其中一个字段为空值，则显示警告消息。 所有输入必须完全符合一些数据，才能使表单有效，并在点击提交按钮时触发验证。

如果你想使用现成的解决方案，你可以考虑流动的插件;

https://plugins.jquery.com/validation/

https://jqueryvalidation.org/

(function(window) { 
 
    var btn = document.querySelector('input[type="submit"]'), 
 
    message = document.getElementById('message'), 
 
    inputs = document.querySelectorAll('input:not([type="submit"])'), 
 
    checkForm = function() { 
 
     var isValid = Array.from(inputs).every(function(input) { 
 
     return input.value !== ''; 
 
     }) 
 
     if (isValid) { 
 
     message.innerHTML = 'form valid'; 
 
     } else { 
 
     message.innerHTML = 'warning message'; 
 
     } 
 
    }; 
 

 
    btn.addEventListener('click', function(event) { 
 
    checkForm(); 
 
    }); 
 
})(window);

<form action="somepage"> 
 
    <p>Account Number</p> 
 
    <input type="text" size="3"> 
 
    <input type="text" size="3"> 
 
    <input type="text" size="4"> 
 
    <span>OR</span> 
 
    <p>Email ID</p> 
 
    <input type="email" name="" id=""> 
 
    <input type="submit" value="Submit"> 
 
</form> 
 
<div id="message"></div>

Answer 2

那么你可以让required选项true所有与callback功能按照文档的元素。如果emailId字段为空，您可以为帐号设置required:true，否则如果所有account number字段都为空，则可以设置emailId。以下是你如何做到这一点。

$("#myform").validate({ 
    rules: { 
    accountNumberOne: { 
     required: function(element) { 
     return $('#emailId').val() == ""; //true only if emailId is empty 
     } 
    }, 
    accountNumberTwo: { 
     required: function(element) { 
     return $('#emailId').val() == ""; //true only if emailId is empty 
     } 
    }, 
    accountNumberThree: { 
     required: function(element) { 
     return $('#emailId').val() == ""; //true only if emailId is empty 
     } 
    }, 
    emailId: { 
     required: function(element) { 
     return $('#accountNumberOne').val() == "" && $('#accountNumberTwo').val() == "" &&$('#accountNumberThree').val() == "" ; 
     //true only if all the other 3 fields are empty 
     } 
    }, 
    }, 
    invalidHandler: function(event, validator) { 
    // 'this' refers to the form 
    var errors = validator.numberOfInvalids(); 
    if (errors) { 
     var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You missed ' + errors + ' fields. They have been highlighted'; 
     $("div.error span").html(message); 
     $("div.error").show(); 
    } else { 
     $("div.error").hide(); 
    } 
    } 
}); 

Here is the DEMO

Relevant Source

---

更新

利用errorPlacement选项把它放在一个地方。

Here is the updated DEMO