JQuery Validate scheint mit Bootstrap zu kollidieren

Ich habe ein Formular, das Bootstrap und JQuery verwendet. Ich versuche, das Formular mithilfe von JQuery validate zu validieren, aber jedes Mal, wenn ich versuche, das Skript validate_min.js hinzuzufügen, wird der Rest meines Formulars deaktiviert. Ich habe das Formular auf dieses Beispiel zugeschnitten.JQuery Validate scheint mit Bootstrap zu kollidieren

Ich habe ein Textfeld mit einigen voreingestellten Werten in einem Dropdown-Menü. Ohne die Validierung kann ich einen voreingestellten Wert auswählen und er wird in das Textfeld eingefügt. Dies funktioniert nicht mehr, wenn die Zeile jquery.validate_min.js unkommentiert ist. (Wenn ich die Linie tun Kommentar-, überprüft das Formular korrekt, so dass ein Teil davon arbeitet.)

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

Quelle

2017-03-07 Huw Morris

Hallo Wenn Sie versuchen, ein Formular zu validieren, kann es einfach so durchgeführt werden. Legen Sie Ihr Formular und den Namen der Eingabe und dann überprüfen, ob es leer ist.

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

Quelle

2017-03-07 15:41:33 Logitech

Dies ist wahrscheinlich, worauf ich zurückgreifen werde, wenn niemand meine Frage lösen kann, aber die echte Form ist ziemlich lang, und ich möchte eine ganze Reihe von Validierung darauf durchführen. JQuery Validierung funktioniert wirklich gut für das, was ich versuche, außer es bricht mein Formular! –

JQuery Validate scheint mit Bootstrap zu kollidieren

Antwort

Verwandte Themen