Question

目前 - 这部分是不完整的，因为用户没有填写房屋号码。和办公室/其他联系号码。

我想要实现的是，如果用户填写了家庭号码，则将此部分检查为已完成。或办公室/其他联系方式。所以基本上一旦他们填写了其中一个，两者的错误信息就会消失任何帮助将不胜感激。

        <div class="signup-card-section">
                    <h2 class="accordion-header boldtext">Tell us 
                     about your contact details <div class="section-complete"><i class="icon-tick"></i> Completed</div></h2>                            

                    <div class="column-control no-padding twelve colgrid">
                      <fieldset>
                        <p><i>Please provide at least 2 contact numbers</i></p>
                        <br/>
                        <div class="row">
                          <div class="four columns">
                            <label for="mobile">Mobile No.<span class="text-red">*</span></label>
                            <div class="columns" style="margin: 0px; padding: 0px; top: 7px;">+</div>
                            <div class="two columns">
                              <input id="mobileprefix" name="mobileprefix" type="text" value="65" readonly>
                            </div>
                            <div class="nine columns">
                              <input id="mobile" name="mobile" type="text" class="input numeric-only readonly" value="0121234567" maxlength="14" readonly>
                            </div>
                          </div>

                          <div class="four columns">
                            <label for="mobile">Home No.</label>
                            <div class="columns" style="margin: 0px; padding: 0px; top: 7px;">+</div>
                            <div class="two columns">
                              <input id="homeprefix" name="homeprefix" type="text" value="65" readonly>
                            </div>
                            <div class="nine columns">
                              <input id="homeno" name="homeno" type="text" class="input numeric-only phone-group" placeholder="eg: 0121234567" maxlength="14">
                            </div>
                          </div>

                          <div class="four columns">
                            <label for="mobile">Office/Other Contact No.</label>
                            <div class="columns" style="margin: 0px; padding: 0px; top: 7px;">+</div>
                            <div class="two columns">
                              <input id="otherprefix" name="homeprefix" type="text" value="65" readonly>
                            </div>
                            <div class="nine columns">
                              <input id="otherno" name="otherno" type="text" class="input numeric-only phone-group" placeholder="eg: 0121234567" maxlength="14">
                            </div>
                          </div>

                        </div>
                        <br/>
                        <div class="row">
                          <div class="four columns">
                            <label for="email">Email address <span class="text-red">*</span></label>
                            <input id="email" name="email" type="text" value="test@mail.com" class="input readonly" readonly>
                          </div>
                        </div>
                        <br/>
                      </fieldset>
                    </div>
                  </div>

在我的JS文件中，我设置了验证规则：

 $(".signup-card").validate({
  ignore:"",
  rules: {
    homeno: {
      required: true
    },
    otherno: {
      required: true
    }
  },
    messages: {
      homeno: {
            required: "Required field"
           },

       otherno: {
            required: "Required field"
           },
      }
    });

Answer 1

使用require_from_group方法来源：https://jqueryvalidation.org/require_from_group-method/

在HTML输入中添加课程phone-group并更新您的规则，如下所述。

 $(".signup-card").validate({
      ignore:"",
      rules: {
        homeno: {
          require_from_group: [1, ".phone-group"]
        },
        otherno: {
          require_from_group: [1, ".phone-group"]
        }
      },
        messages: {
          homeno: {
                required: "Required field"
               },

           otherno: {
                required: "Required field"
               },
          }
        });

检查表单的验证 - 如果填写了表格，则通过验证

1 个答案: