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冲突

回答

相关问题