JQuery驗證似乎與Bootstrap衝突

我有一個使用Bootstrap和JQuery的表單。我試圖驗證表單使用JQuery驗證，但每當我嘗試添加validate_min.js腳本，它會停止我的窗體的其餘工作。我已將表格切成這個例子。JQuery驗證似乎與Bootstrap衝突

我有一個文本字段，在下拉菜單中有一些預設值。如果沒有驗證，我可以選擇一個預設值，並將其插入到文本字段中。如果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"); 
    }); 
});

來源

2017-03-07 Huw Morris

喜如果您試圖驗證表單，那麼可以像這樣輕鬆完成。把你的表單和輸入名稱，然後檢查它是否爲空。

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

來源

2017-03-07 15:41:33 Logitech

如果沒有人能解決我的問題，這可能是我會採取的措施，但真正的形式是相當長的，我想對它進行相當多的驗證。 JQuery驗證非常適合我正在嘗試做的事情，除非它打破了我的表單！ –

JQuery驗證似乎與Bootstrap衝突

回答

相關問題