Question

我想在文本框组中应用必需的字段验证，其中至少一个文本框组必须包含值。在波纹管图像中，必须填写至少一家银行的详细信息。

我使用了来自http://www.formvalidator.net/#custom-validators的jquery-form-validator插件，并创建了如下所示的custome validator，但它无效。

   $("#txtBankDetails")
   .valAttr('error-msg', 'select atlest 1 bankname.');


   $.formUtils.addValidator({       
    name: 'data-text-group',
    validatorFunction: function (value, $el, config, language, $form) {
        debugger
        var isValid = true,
     // get name of element. since it is a checkbox group, all checkboxes will have same name
       elname = $el.attr('data-text-group'),
     // get checkboxes and count the checked ones
       $textBoxes = $('input[type=textbox][data-text-group^="' + elname + '"]', $form),

        nonEmptyCount = $textBoxes.filter(function () {
            return !!this.value;
        }).length;

        alert(nonEmptyCount);
        if (nonEmptyCount == 0) {
            isValid = false;
        }

    }
});
  // Setup form validation only on the form having id "registration"
$.validate({

    form: '#registration',
    modules: 'date, security, file, logic',
    validateOnBlur: true,
    showHelpOnFocus: true,
    addSuggestions: true,
    onModulesLoaded: function () {
        console.log('All modules loaded!');
    },
    onSuccess: function ($form) {
        form.submit();
        alert("sucess")
        return false;
    },
    onError: function () {
        alert("Error")
    }
});

html代码是，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/theme-default.min.css"
  rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>

   <form id="registration" method="post" action="@Url.Action("NewRegistration", "StaticPage")" enctype="multipart/form-data" class='has-validation-callback'>
<div class="container">
<div class="row">
  <div class="col-md-4">
  <input id="txtBankDetails" name="Bankname1" data-text-group="BankName" placeholder="01. BANK NAME" data-validation-error-msg="select atlest 1 bankname.">
  </div>
  <div class="col-md-4">
    <input class="nwresmainfild" name="BankACNo1" placeholder="BANK A/C NO.">
  </div>
  <div class="col-md-4">
  <input class="nwresmainfild" name="BankAddress1" placeholder="BANK ADDRESS">
  </div>

  </div>
  <div class="row">
  <div class="col-md-4">
  <input id="txtBankDetails" name="Bankname2" data-text-group="BankName" placeholder="01. BANK NAME" data-validation-error-msg="select atlest 1 bankname.">
  </div>
  <div class="col-md-4">
    <input  name="BankACNo2" placeholder="BANK A/C NO.">
  </div>
  <div class="col-md-4">
  <input name="BankAddress2" placeholder="BANK ADDRESS">
  </div>

  </div>
  <div class="row">
  <div class="col-md-4">
  <input id="txtBankDetails" name="Bankname3" data-text-group="BankName" placeholder="03. BANK NAME" >
  </div>
  <div class="col-md-4">
    <input  name="BankACNo3" placeholder="BANK A/C NO.">
  </div>
  <div class="col-md-4">
  <input  name="BankAddress3" placeholder="BANK ADDRESS">
  </div>

  </div>
</div>
   <input value="PROCESS & PRINT" class="green-btn uppercase" type="submit" id="btnSubmit" />
</form>

文本框组上的必填字段验证不起作用

0 个答案: