Question

我有一个使用Bootstrap和JQuery的表单。我正在尝试使用JQuery验证来验证表单，但每当我尝试添加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>

形状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");
    });
});

Answer 1

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

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

JQuery Validate似乎与Bootstrap冲突

1 个答案: