Eingabetext im Bootstrap-Modal validieren

Question

Ich möchte ein Formular in einem Bootstrap-Modal validieren, ohne ein Framework zu verwenden. Es ist eigentlich ein einfaches Modal mit nur einem Eingabetext und zwei Buttons "Close" und "Send". Der Benutzer sollte seinen/ihren Namen in das Eingabefeld eingeben und auf Senden klicken. Das Formular wird mit dem Methodenpost gesendet.

Was ich tun möchte ist, dass, wenn der Benutzer nichts in das Eingabefeld eingibt und auf den Button "Senden" klickt, sollte das Eingabefeld einen roten Rahmen haben, der es anstelle des blauen Standardrahmens umkreist . Hier ist der Code für meine modal:

<div id="myModal" class="modal fade" tabindex="-1"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <!--form--> 

      <form class = "form-horizontal" id="myForm" method="post" action="test.php" role="form"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title">My modal</h4> 
       </div> 
       <div class="modal-body"> 
        <p> 
         Please enter your name: 
        </p> 
        <br/> 

        <div class="form-group"> 

         <div class="col-lg-12"> 
          <label class="control-label" for="firstname">Name</label> 
          <input type="text" class="form-control required" id="firstname" name="firstname"> 
         </div> 
        </div> 

       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button id="myFormSubmit" class="btn btn-primary">Send</button> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

Ich habe versucht, mit Hilfe von Javascript die Klasse des eingegebenen Textes zu has-error ändern, aber es nicht der roten Umrandung erzeugen. Wenn ich auf senden klicken sendet er den leeren Wert durch die post-Methode statt Hier ist mein Javascript-Code:

<script type="text/javascript"> 
     $('#myForm').validate({ 
      rules: { 
       name: { 
        minlength: 1, 
        required: true 
       }, 
      }, 
      highlight: function (element) { 
       $('#firstname').removeClass('has-success').addClass('has-error'); 
      }, 
      success: function (element) { 
       $('#firstname').removeClass('has-error').addClass('has-success'); 
      } 
     }); 
    </script> 

Ich fühle mich wie ich hier eine ganze Menge Dinge mischen bin. Ich bin noch neu zu Bootstrap und Javascript. Wie kann ich den gewünschten roten Umriss erhalten? Danke.

Edit: Validate Funktion:

function validate() { 
    var x = document.forms["myForm"]["firstname"].value; 
    if (x == null || x == "") { 
     return false; 
    } 
} 

Answer 1

Sie müssen die CSS Klassen der inputEltern Element div.form-group, die nicht input selbst ändern: Um

<div class="form-group has-error"> 
    <div class="col-lg-12"> 
     <label class="control-label" for="firstname">Name</label> 
     <input type="text" class="form-control required" id="firstname" name="firstname"> 
    </div> 
</div> 

:

Die HTML nach dem Knopf klicken einreichen sollte wie folgt aussehen erreichen Sie dies, ändern Sie Ihre JavaScript Code zu diesem:

<script type="text/javascript"> 
    $('#myForm').on('submit', function(e) { 
    var firstName = $('#firstname'); 

    // Check if there is an entered value 
    if(!firstName.val()) { 
     // Add errors highlight 
     firstName.closest('.form-group').removeClass('has-success').addClass('has-error'); 

     // Stop submission of the form 
     e.preventDefault(); 
    } else { 
     // Remove the errors highlight 
     firstName.closest('.form-group').removeClass('has-error').addClass('has-success'); 
    } 
    }); 
</script> 

Answer 2

div in Bootstrap ...

<div class="form-group"> 
    <div class="row"> 

     <label class="col-xs-2 col-sm-2 control-label">city:</label> 

     <div class="col-xs-3 col-sm-3 formGroups" 
      id="city_form1"> 
      <form:input name="city" class="form-control" 
       placeholder="City" data-toggle="tooltip" 
       data-placement="bottom" title="City" maxlength="15" /> 

      <small class="help-block col-sm-offset-0 col-sm-9" 
       style="display: none;">city must require</small> 
     </div> 
    </div> 
</div> 

, wie Sie es sehen, ist .help-Block ist display: none Sie jetzt Javascript-Funktion schreiben und Überprüfe die Validierung und wenn die Validierung jetzt bestanden wird, zeige es an: block ... so kannst du es tun

mit boot bag :)

Answer 3

seine sehr einfach

nur Klasse gelten .has-Fehler durch JavaScript-Funktion

<div class="form-group has-error"> 
    <div class="row"> 

     <label class="col-xs-2 col-sm-2 control-label">city:</label> 

     <div class="col-xs-3 col-sm-3 formGroups" 
      id="city_form1"> 
      <form:input name="city" class="form-control" 
       placeholder="City" data-toggle="tooltip" 
       data-placement="bottom" title="City" maxlength="15" /> 

     </div> 
    </div> 
</div> 

Answer 4

Verwenden Sie einfach erforderlich innerhalb des Eingabefeldes ähnliche

<input type="text" class="form-control required" id="firstname" name="firstname" required/>