JQuery Validate 似乎与 Bootstrap 冲突答案

【问题标题】：JQuery Validate appears to conflict with BootstrapJQuery Validate 似乎与 Bootstrap 冲突
【发布时间】：2017-07-27 21:27:17
【问题描述】：

我有一个使用 Bootstrap 和 JQuery 的表单。我正在尝试使用 JQuery validate 验证表单，但是每当我尝试添加 validate_min.js 脚本时，它都会停止我的表单的其余部分工作。我已将表单缩减为这个示例。

我有一个文本字段，下拉菜单中有一些预设值。在没有验证的情况下，我可以选择一个预设值，并将其插入到文本字段中。如果 jquery.validate_min.js 行未注释，这将停止工作。（如果我取消注释该行，表单将正确验证，因此它的一部分正在工作。）

html:

<!doctype html>
<html>
<head>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-datetimepicker.css" rel="stylesheet">
    <link href="css/bootstrap-select.min.css" rel="stylesheet">
    <link href="css/forms.css" rel="stylesheet">

    <script src="js/jquery.min.js"></script>
    <!--<script src="js/jquery.validate.min.js"</script>-->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/moment.js"></script>
    <script src="js/bootstrap-datetimepicker.min.js"></script>
    <script src="js/bootstrap-select.min.js"></script>
    <script src="js/form-test2.js"></script>

</head>


<body>

<div class="page-header">
  <h1>Test Form Layout</h1>
</div>

<form class="form-horizontal" method="POST" action="#" id="validate_test">

  <div class="form-group">
    <label class="control-label col-sm-3" for="preset_box">Preset test</label>
    <div class="col-sm-3">
      <div class="input-group">
        <input class="form-control" id="preset_box" name="preset_box">
        <div class="input-group-btn">
          <button type="button" class="btn btn-primary dropdown-toggle"
                  data-toggle="dropdown">Presets <span class="caret"></span></button>
          <ul class="dropdown-menu dropdown-menu-left">
            <li><a href="#" id="pre_1">Preset 1</a></li>
            <li><a href="#" id="pre_2">Preset 2</a></li>
            <li><a href="#" id="pre_3">Preset 3</a></li>
          </ul>
        </div> <!-- input-group-btn -->
      </div> <!-- input-group -->
    </div>   <!-- col-sm-3 -->
  </div> <!-- form-group -->


<button type="submit" class="btn btn-default">Submit</button>
</form>

<!--
<script>
  $("#dustdistform").validate({
//    ignore: ".novalidate",
    rules: {
    }
  });
</script>
-->
</body>
</html>

form-test2.js：

$(document).ready(function(){

    $("#pre_1").click(function() {
        $("#preset_box").val("10");
    });

    $("#pre_2").click(function() {
        $("#preset_box").val("20");
    });

    $("#pre_3").click(function() {
        $("#preset_box").val("30");
    });
});

【问题讨论】：

标签： javascript jquery twitter-bootstrap validation

【解决方案1】：

您好，如果您正在尝试验证表单，那么可以像这样轻松完成。输入您的表格并输入名称，然后检查其是否为空。

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
}

【讨论】：

如果没有人能解决我的问题，这可能是我会求助的方法，但真正的形式很长，我想对其进行相当多的验证。 JQuery 验证非常适合我正在尝试做的事情，只是它破坏了我的表单！