jQuery 组验证

Posted

技术标签:

【中文标题】jQuery 组验证【英文标题】：jQuery Group validation 【发布时间】：2017-11-18 09:39:39 【问题描述】：

目前在我的申请中，我需要输入学生父母的详细信息。父母将是3种类型。

    妈妈 父亲 加迪安

验证方案描述如下，所有方案都是强制性的。

场景 1：学生必须填写至少一个家长详细信息

场景 2：如果学生填写家长详细信息中的一个字段，而不是其他字段是强制性的。

目前我可以验证Scenario 2，但如何验证scenarios。

这是我的 html 代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<form class="form-inline" method="post">
<div class="form-group">
<input class="form-control" type="text" name="mother_fname" id="mother_fname" placeholder="Mother's First Name" />
</div>

<div class="form-group">
  <input class="form-control" type="text" name="mother_lname" id="mother_lname" placeholder="Mother's Last Name" />
</div>

<div class="form-group">
  <input class="form-control" type="text" name="mother_email" id="mother_email" placeholder="Mother's Email Address" />
</div>

<div class="form-group">
  <input class="form-control" type="text" name="mother_phone" id="mother_phone" placeholder="Mother's Phone Number" />
</div>


<hr>
<div class="form-group">
<input class="form-control" type="text" name="father_fname" id="father_fname" placeholder="Father's First Name" />
</div>

<div class="form-group">
  <input class="form-control" type="text" name="father_lname" id="father_lname" placeholder="Father's Last Name" />
</div>

<div class="form-group">
  <input class="form-control" type="text" name="father_email" id="father_email" placeholder="Father's Email Address" />
</div>

<div class="form-group">
  <input class="form-control" type="text" name="father_phone" id="father_phone" placeholder="Father's Phone Number" />
</div>

<hr>
<div class="form-group">
<input class="form-control" type="text" name="gardian_fname" id="gardian_fname" placeholder="Gardian's First Name" />
</div>

<div class="form-group">
  <input class="form-control" type="text" name="gardian_lname" id="gardian_lname" placeholder="Gardian's Last Name" />
</div>

<div class="form-group">
  <input class="form-control" type="text" name="gardian_email" id="gardian_email" placeholder="Gardian's Email Address" />
</div>

<div class="form-group">
  <input class="form-control" type="text" name="gardian_phone" id="gardian_phone" placeholder="Gardian's Phone Number" />
</div>

<hr>
<input type="submit" class="btn btn-primary" name="add_details" id="add_details" value="Add Details" />
</form>

任何帮助将不胜感激。

【问题讨论】：

这个jQuery plugin 用于表单验证是完美的 您只需要确保，在submit 事件中，如果两个条件都满足，这很容易。为什么你做不到？ 【参考方案1】：

根据您的要求，这是一个基本逻辑流程：

document.forms[0].onsubmit = function(e)
    /* check both parent fields to see if one has any value */

    /* if one has value, ask user to fill all the parent's fields */
        /* check if all that parent's fields are filled also */
            /* if one isn't filled, stop the iteration and tell the user he must fill the rest */
            return false;

            /* if all are filled */
            return true;

     /* if no parent field has value */
        return false;
;

【讨论】：

【参考方案2】：

最后我达到了要求并为它创建了代码。我不确定它是否正确。

请检查下面描述的解决方案。我使用了 jQuery 验证插件并添加了一种额外的方法，如下所述。

jQuery.validator.addMethod("checkParents", function(value, element) 
    var counter1 = 0;
    var counter2 = 0;
    var counter3 = 0;
    if ($('#gardian_fname').val() != '') 
        counter1++;
    
    if ($('#gardian_lname').val() != '') 
        counter1++;
    
    if ($('#gardian_phone').val() != '') 
        counter1++;
    
    if ($('#gardian_email').val() != '') 
        counter1++;
    

    if ($('#mother_fname').val() != '') 
        counter2++;
    
    if ($('#mother_lname').val() != '') 
        counter2++;
    
    if ($('#mother_phone').val() != '') 
        counter2++;
    
    if ($('#mother_email').val() != '') 
        counter2++;
    

    if ($('#father_fname').val() != '') 
        counter3++;
    
    if ($('#father_lname').val() != '') 
        counter3++;
    
    if ($('#father_phone').val() != '') 
        counter3++;
    
    if ($('#father_email').val() != '') 
        counter3++;
    
    if ((counter1 == 0 || counter1 == 4) && (counter2 == 0 || counter2 == 4) && (counter3 == 0 || counter3 == 4)) 
        if (counter1 == 0 && counter2 == 0 && counter3 == 0) 
            bootbox.alert('Please fill atleast one of parents details given below.<br><ul><li>1. Provide valid Name of your Parent.</li><li>2. Provide valid Email address of your Parent.</li><li>3. Provide valid Phone number of your Parent.</li></ul>');
            return false;
         else 
            return true;
        
     else 
        if (counter1 > 0 && counter1 < 4) 
            errors = gardian_fname: "Please fill all details of Gardian";
            $validator.showErrors(errors);
        
        if (counter2 > 0 && counter2 < 4) 
            errors = mother_fname: "Please fill all details of Mother";
            $validator.showErrors(errors);
        
        if (counter3 > 0 && counter3 < 4) 
            errors = father_fname: "Please fill all details of Father";
            $validator.showErrors(errors);
        
        return false;
    
    return false;
, 'Please select atleast one parents details and please enter name,email and phone number details');

【讨论】：

【参考方案3】： 

$(document).ready(function() 
        jQuery.validator.setDefaults(
            debug: true,
            success: "valid"
        );
        $("#myform").validate(
            rules: 
                mother_fname: 
                    require_from_group: [1, ".row1-group"]
                ,
                mother_lname: 
                    require_from_group: [1, ".row1-group"]
                ,
                mother_email: 
                    require_from_group: [1, ".row1-group"]
                ,
                mother_phone: 
                    require_from_group: [1, ".row1-group"]
                ,
                father_fname: 
                    require_from_group: [1, ".row2-group"]
                ,
                father_lname: 
                    require_from_group: [1, ".row2-group"]
                ,
                father_email: 
                    require_from_group: [1, ".row2-group"]
                ,
                father_phone: 
                    require_from_group: [1, ".row2-group"]
                ,
                gardian_fname: 
                    require_from_group: [1, ".row3-group"]
                ,
                gardian_lname: 
                    require_from_group: [1, ".row3-group"]
                ,
                gardian_email: 
                    require_from_group: [1, ".row3-group"]
                ,
                gardian_phone: 
                    require_from_group: [1, ".row3-group"]
                
            
        );
    );
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

<form id="myform" class="form-inline" method="post">
        <div class="form-group">
            <input class="form-control row1-group" type="text" name="mother_fname" id="mother_fname" placeholder="Mother's First Name" />
        </div>
        <div class="form-group">
            <input class="form-control row1-group" type="text" name="mother_lname" id="mother_lname" placeholder="Mother's Last Name" />
        </div>
        <div class="form-group">
            <input class="form-control row1-group" type="text" name="mother_email" id="mother_email" placeholder="Mother's Email Address" />
        </div>
        <div class="form-group">
            <input class="form-control row1-group" type="text" name="mother_phone" id="mother_phone" placeholder="Mother's Phone Number" />
        </div>
        <hr>
        <div class="form-group">
            <input class="form-control row2-group" type="text" name="father_fname" id="father_fname" placeholder="Father's First Name" />
        </div>
        <div class="form-group">
            <input class="form-control row2-group" type="text" name="father_lname" id="father_lname" placeholder="Father's Last Name" />
        </div>
        <div class="form-group">
            <input class="form-control row2-group" type="text" name="father_email" id="father_email" placeholder="Father's Email Address" />
        </div>
        <div class="form-group">
            <input class="form-control row2-group" type="text" name="father_phone" id="father_phone" placeholder="Father's Phone Number" />
        </div>
        <hr>
        <div class="form-group">
            <input class="form-control row3-group" type="text" name="gardian_fname" id="gardian_fname" placeholder="Gardian's First Name" />
        </div>
        <div class="form-group">
            <input class="form-control row3-group" type="text" name="gardian_lname" id="gardian_lname" placeholder="Gardian's Last Name" />
        </div>
        <div class="form-group">
            <input class="form-control row3-group" type="text" name="gardian_email" id="gardian_email" placeholder="Gardian's Email Address" />
        </div>
        <div class="form-group">
            <input class="form-control row3-group" type="text" name="gardian_phone" id="gardian_phone" placeholder="Gardian's Phone Number" />
        </div>
        <hr>
        <input type="submit" class="btn btn-primary" name="add_details" id="add_details" value="Add Details" />
    </form>
jQuery.validator.setDefaults(
    debug: true,
    success: "valid"
);
$("#myform").validate(
    rules: 
        mother_fname: 
            require_from_group: [1, ".row1-group"]
        ,
        mother_lname: 
            require_from_group: [1, ".row1-group"]
        ,
        mother_email: 
            require_from_group: [1, ".row1-group"]
        ,
        mother_phone: 
            require_from_group: [1, ".row1-group"]
        ,
        father_fname: 
            require_from_group: [1, ".row2-group"]
        ,
        father_lname: 
            require_from_group: [1, ".row2-group"]
        ,
        father_email: 
            require_from_group: [1, ".row2-group"]
        ,
        father_phone: 
            require_from_group: [1, ".row2-group"]
        ,
        gardian_fname: 
            require_from_group: [1, ".row3-group"]
        ,
        gardian_lname: 
            require_from_group: [1, ".row3-group"]
        ,
        gardian_email: 
            require_from_group: [1, ".row3-group"]
        ,
        gardian_phone: 
            require_from_group: [1, ".row3-group"]
        
    
);

<link href="https://jqueryvalidation.org/files/demo/site-demos.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
    <form id="myform" class="form-inline" method="post">
        <div class="form-group">
            <input class="form-control row1-group" type="text" name="mother_fname" id="mother_fname" placeholder="Mother's First Name" />
        </div>
        <div class="form-group">
            <input class="form-control row1-group" type="text" name="mother_lname" id="mother_lname" placeholder="Mother's Last Name" />
        </div>
        <div class="form-group">
            <input class="form-control row1-group" type="text" name="mother_email" id="mother_email" placeholder="Mother's Email Address" />
        </div>
        <div class="form-group">
            <input class="form-control row1-group" type="text" name="mother_phone" id="mother_phone" placeholder="Mother's Phone Number" />
        </div>
        <hr>
        <div class="form-group">
            <input class="form-control row2-group" type="text" name="father_fname" id="father_fname" placeholder="Father's First Name" />
        </div>
        <div class="form-group">
            <input class="form-control row2-group" type="text" name="father_lname" id="father_lname" placeholder="Father's Last Name" />
        </div>
        <div class="form-group">
            <input class="form-control row2-group" type="text" name="father_email" id="father_email" placeholder="Father's Email Address" />
        </div>
        <div class="form-group">
            <input class="form-control row2-group" type="text" name="father_phone" id="father_phone" placeholder="Father's Phone Number" />
        </div>
        <hr>
        <div class="form-group">
            <input class="form-control row3-group" type="text" name="gardian_fname" id="gardian_fname" placeholder="Gardian's First Name" />
        </div>
        <div class="form-group">
            <input class="form-control row3-group" type="text" name="gardian_lname" id="gardian_lname" placeholder="Gardian's Last Name" />
        </div>
        <div class="form-group">
            <input class="form-control row3-group" type="text" name="gardian_email" id="gardian_email" placeholder="Gardian's Email Address" />
        </div>
        <div class="form-group">
            <input class="form-control row3-group" type="text" name="gardian_phone" id="gardian_phone" placeholder="Gardian's Phone Number" />
        </div>
        <hr>
        <input type="submit" class="btn btn-primary" name="add_details" id="add_details" value="Add Details" />
    </form>

请检查以下代码

<form id="myform" class="form-inline" method="post">
    <div class="form-group">
        <input class="form-control row1-group" type="text" name="mother_fname" id="mother_fname" placeholder="Mother's First Name" />
    </div>
    <div class="form-group">
        <input class="form-control row1-group" type="text" name="mother_lname" id="mother_lname" placeholder="Mother's Last Name" />
    </div>
    <div class="form-group">
        <input class="form-control row1-group" type="text" name="mother_email" id="mother_email" placeholder="Mother's Email Address" />
    </div>
    <div class="form-group">
        <input class="form-control row1-group" type="text" name="mother_phone" id="mother_phone" placeholder="Mother's Phone Number" />
    </div>
    <hr>
    <div class="form-group">
        <input class="form-control row2-group" type="text" name="father_fname" id="father_fname" placeholder="Father's First Name" />
    </div>
    <div class="form-group">
        <input class="form-control row2-group" type="text" name="father_lname" id="father_lname" placeholder="Father's Last Name" />
    </div>
    <div class="form-group">
        <input class="form-control row2-group" type="text" name="father_email" id="father_email" placeholder="Father's Email Address" />
    </div>
    <div class="form-group">
        <input class="form-control row2-group" type="text" name="father_phone" id="father_phone" placeholder="Father's Phone Number" />
    </div>
    <hr>
    <div class="form-group">
        <input class="form-control row3-group" type="text" name="gardian_fname" id="gardian_fname" placeholder="Gardian's First Name" />
    </div>
    <div class="form-group">
        <input class="form-control row3-group" type="text" name="gardian_lname" id="gardian_lname" placeholder="Gardian's Last Name" />
    </div>
    <div class="form-group">
        <input class="form-control row3-group" type="text" name="gardian_email" id="gardian_email" placeholder="Gardian's Email Address" />
    </div>
    <div class="form-group">
        <input class="form-control row3-group" type="text" name="gardian_phone" id="gardian_phone" placeholder="Gardian's Phone Number" />
    </div>
    <hr>
    <input type="submit" class="btn btn-primary" name="add_details" id="add_details" value="Add Details" />
</form>


<script type="text/javascript">
$(document).ready(function() 
    jQuery.validator.setDefaults(
        debug: true,
        success: "valid"
    );
    $("#myform").validate(
        rules: 
            mother_fname: 
                require_from_group: [1, ".row1-group"]
            ,
            mother_lname: 
                require_from_group: [1, ".row1-group"]
            ,
            mother_email: 
                require_from_group: [1, ".row1-group"]
            ,
            mother_phone: 
                require_from_group: [1, ".row1-group"]
            ,
            father_fname: 
                require_from_group: [1, ".row2-group"]
            ,
            father_lname: 
                require_from_group: [1, ".row2-group"]
            ,
            father_email: 
                require_from_group: [1, ".row2-group"]
            ,
            father_phone: 
                require_from_group: [1, ".row2-group"]
            ,
            gardian_fname: 
                require_from_group: [1, ".row3-group"]
            ,
            gardian_lname: 
                require_from_group: [1, ".row3-group"]
            ,
            gardian_email: 
                require_from_group: [1, ".row3-group"]
            ,
            gardian_phone: 
                require_from_group: [1, ".row3-group"]
            
        
    );
);
</script>

【讨论】：

以上是关于jQuery 组验证的主要内容，如果未能解决你的问题，请参考以下文章

使用 jQuery 启用/禁用特定“验证组”中的 asp.net 验证控件？

Jquery 组 表单验证

jQuery 单选组验证和启用选项，如果某些单选检查（jsfiddle 提供）

jQuery 验证，将错误消息放在复选框和单选按钮组下方

jQuery Validation - 一个 asp.net 表单上的多个提交按钮，不同的验证组？

Jquery数组验证+ php