Question

我正在使用bootstrap来设计表单和jquery.validate来验证它。

我的每个表单元素都在 div.form-group 中我希望在没有填充任何文本框时停止表单提交。但是，某种程度上验证不会在页面上触发。

$.validator.addClassRules("multisearchfield", {
    require_from_group: [2, ".multisearchfield"]
});

$("form").validate({
  highlight: function(element) {
    $(element).closest('.form-group').addClass('has-error');
  },
  unhighlight: function(element) {
    $(element).closest('.form-group').removeClass('has-error');
  },
  errorElement: 'span',
  errorClass: 'help-block',
  errorPlacement: function(error, element) {
    if (element.parent('.input-group').length) {
      error.insertAfter(element.parent());
    } else {
      error.insertAfter(element);
    }
  }
});

以下是jsfiddle

Answer 1

您的代码可以正常工作。我在你的小提琴中表明它没有得到一些外部的JavaScript库。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/additional-methods.min.js"></script>

通过runnig检查代码段。它正在发挥作用。

$(document).ready(function() {
  $.validator.addClassRules("multisearchfield", {
    require_from_group: [2, ".multisearchfield"]
  });

  $("form").validate({
    highlight: function(element) {
      $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
      $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
      if (element.parent('.input-group').length) {
        error.insertAfter(element.parent());
      } else {
        error.insertAfter(element);
      }
    }
  });

})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/additional-methods.min.js"></script>
<form method="post">

  <div id="multisearchfields" class="searchgrp col-lg-12 col-md-12 col-sm-12 panel">

    <div class="row form-group form-group-sm">
      <label class="control-label col-md-2 col-lg-2 col-sm-3" id="lblController" for="txtController">Controller:</label>
      <div class="col-md-10 col-lg-10 col-sm-9">
        <input type="text" id="txtController" name="txtController" class="form-control multisearchfield" />
      </div>
    </div>
    <div class="row form-group form-group-sm">
      <label class="control-label col-md-2 col-lg-2 col-sm-3" id="lblProductClass" for="txtProductClass">Product Class:</label>
      <div class="col-md-10 col-lg-10 col-sm-9">
        <input type="text" id="txtProductClass" name="txtProductClass" class="form-control multisearchfield" />
      </div>
    </div>
    <div class="row form-group form-group-sm">
      <label class="control-label col-md-2 col-lg-2 col-sm-3" id="lblMarketChannel" for="txtMarketChannel">Market Channel:</label>
      <div class="col-md-10 col-lg-10 col-sm-9">
        <input type="text" id="txtMarketChannel" name="txtMarketChannel" class="form-control multisearchfield" />
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

require_from_group无效

1 个答案: