JQuery Validateがブートストラップと矛盾するように見える

私は、ブートストラップとJQueryを使用するフォームを持っています。私はJQueryの検証を使用してフォームを検証しようとしていますが、validate_min.jsスクリプトを追加しようとすると、残りのフォームが機能しなくなります。フォームをこの例に切り詰めました。JQuery Validateがブートストラップと矛盾するように見える

私はドロップダウンメニューにいくつかのプリセット値を持つテキストフィールドを持っています。バリデーションがなければ、プリセット値を選択してテキストフィールドに挿入します。これは、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 Validateがブートストラップと矛盾するように見える

答えて

関連する問題