Convalida testo di input in modal bootstrap

Question

voglio convalidare un modulo in un modal bootstrap senza utilizzare alcun quadro. In realtà è una semplice scelta obbligatoria con un testo unico di ingresso e due pulsanti "Close" e "Invia". L'utente deve digitare il suo/il suo nome nella casella di input e fare clic su Invia. Il modulo è inviato con il metodo post.

Quello che voglio fare è che, se l'utente non inserisce nulla nella casella di input di e fa clic sul pulsante "Invia", la casella di input dovrebbe avere un bordo rosso che lo circonda invece del bordo blu predefinito . Ecco il codice per il mio modale:

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

Ho provato ad utilizzare javascript per cambiare la classe del testo di input per has-error ma non produce il contorno rosso. Quando clicco su Send It invia il valore vuoto attraverso il metodo POST invece di Ecco il mio codice JavaScript:

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

Mi sento come se stessi mescolare un sacco di cose qui. Sono ancora nuovo di bootstrap e javascript. Come posso ottenere il contorno rosso desiderato? Grazie.

Edit: Convalida funzione:

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

Answer 1

È necessario modificare le CSS classi dell'elemento inputgenitorediv.form-group, non il input sé:

Il HTML dopo che il pulsante di invio scatto dovrebbe essere simile a questo:

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

Per raggiungere questo obiettivo, alterare il codice JavaScript a questo:

<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 cinghia di avvio ...

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

come vedete c'è .help-block è display: none ora scrivere funzione javascript e controlla la convalida e se la convalida ora passa fai in modo di visualizzarla: blocco ... così puoi fare

divertiti con il cinturino di avvio :)

Answer 3

è molto facile

basta applicare classe .has errori per div funzione javascript

<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

Basta usare richiesto all'interno del campo di input come questo

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