Wie übermittele ich ein Formular nur, wenn alle erforderlichen Attr-Felder mit Bootstrap gefüllt sind?

Question

Ich muss das Formular nur senden, wenn alle Eingabefelder das Attribut required="required" haben.

Meine Form:

<form method="post" action="/actions.php/" data-js-validate="true" data-js-highlight-state-msg="true" data-js-show-valid-msg="true"> 
    <input type="text" name="amount[]" required="required" placeholder="Amount" class="inputChangeVal" data-js-input-type="number" /> 
    <input type="text" name="grade[]" required="required" placeholder="Amount" class="inputChangeVal" data-js-input-type="number" /> 
    <button class="btn" type="submit" name="confirm" >Pay Now</button> 
</form> 

Ich wollte die Form nach zeigt ein Meldungsfeld einzureichen. Wie Sie sehen, ist meine Formularaktion eine andere PHP-Datei. , so dass ich das Standardverhalten verhindern und dann das Formular senden, wenn auf die Schaltfläche "Weiter" geklickt wird. Ich benutze Bootsrap für das.

Bootstrap-Modell:

<div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Proccess Payment</h4> 
      </div> 
      <div class="modal-body"> 
       <p> 
       "Your about to make a online payment. Click 'Edit' to review the data before proceeding or click 'Continue' to confirm the details for payment." 
       </p> 
       <button class="btn btn-default" data-dismiss="modal">Edit</button> 
       <button class="btn btn-primary" id="continuebtn">Continue</button> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

und die jQuery dafür:

<script> 
    jQuery(document).ready(function() { 
    /* for boot strap model */ 
     jQuery('#payBtn').on('click',function(e){ 
      e.preventDefault(); 
      jQuery('#myModal').modal('toggle'); 

     }); 

     jQuery('#continuebtn').on('click',function(){ 
      jQuery('form').submit(); 
     }); 
    }); 
</script> 

aber dieses sendet das aus, wenn ich Sie auf die Schaltfläche Continue Taste. Egal, die Eingabefelder gefüllt sind oder nicht ..

Was ich will, ist die Form nur eingereicht werden, wenn die fileds required="required" gefüllt sind ..

wie kann ich das tun?

Answer 1

Fügen Sie zunächst ein ID-Attribut auf der Schaltfläche "Senden" mit dem Namen "PayBtn".

nach diesen

die folgenden Jquery mit Ihrem aktuellen js ersetzen

<script> 
jQuery(document).ready(function() { 
    jQuery('#payBtn').on('click',function(e){ 
     e.preventDefault(); 
     var empty = false; 
     jQuery('input:text').each(function(){ 
      if(jQuery(this).val()==''){ 
       console.log('error'); 
       empty = false; 
      } else empty = true; 
     }); 
     if(empty) 
      jQuery('#myModal').modal('toggle'); 
     else 
      console.log('your error message'); 
    }); 

    jQuery('#continuebtn').on('click',function(){ 
     jQuery('form').submit(); 
    }); 
}); 

Answer 2

Sie können einige Bedingungen in Ihrer jQuery-Funktion hinzu:

jQuery('#continuebtn').on('click',function(){ 
     if($("#myInput").val() != "") 
     { 
      jQuery('form').submit(); 
     } 
    }); 

Auf diese Weise können Sie bestimmte Aktionen für jeden Eingang tun.

Aber es gibt eine andere Methode, die alle Eingaben überprüfen bestehen auf einmal "erforderlich" -Attribut enthält

var missingFieldCounter = 0; // we count the number of field missing 
jQuery('#continuebtn').on('click',function(){ 
    $(':input[required]').each(function() // for each input that contains "required" attribute 
    { 
     if($(this).val() == "") // if the required input is not filled 
     { 
      missingFieldCounter+=1; 
      $(this).after("<b>You have to fill this field</b>"); // we print a message after the input 
     } 
    }); 

    if(missingFieldCounter == 0) // if the counter has never been incremented (every field is filled) 
    { 
     jQuery('form').submit(); 
    } 
}); 

See the fiddle Here

Answer 3

$('form').on('submit', function(event){ 
     event.preventDefault(); 
     event.stopPropagination(); 
     var check = true; 
     $('*[requiered]').each(function(){ 
     // run other filter functions here 
     if($(this).val().trim().length < 1){ 
      check = false; 
     } 
´  }); 
     if(!check){ 
     alert('something is missing'); 
     } else { 
     // all is fine 
     $(this).submit(); 
     } 
    }) 

so etwas?

Answer 4

hier ist ein funktionstüchtiges Beispiel

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Test-Projekt</title> 
    <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=10"> 
    <link href="favicon.ico" rel="Shortcut icon"> 
</head> 
<body> 
    <form action="" method="GET"> 
     <div> 
      <label>required input</label> 
     </div> 
     <div> 
      <input type="text" name="myInput" required> 
     </div> 
     <div> 
      <button id="btn_submit" type="submit">Submit Form</button> 
     </div> 
    </form> 
</body> 
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
     integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" 
     crossorigin="anonymous"> 
</script> 
<script type="application/javascript"> 
    $(document).ready(function(){ 
     $('#btn_submit').on('click', function(event){ 
      event.preventDefault(); 
      event.stopPropagation(); 
      var formElement = $(this).parents('form'); 
      formElement.find('input:required').each(function(){ 
       var minLength = 1; 
       var value = $(this).val(); 
       var checked = true; 
       if(value.trim().length < minLength) { 
        console.log('length is not ok'); 
        checked = false; 
       } 

       if(!checked){ 
        console.log($(this).attr('name') + ' is not correctly filled!'); 
       } else { 
        console.log('all is ok'); 
        formElement.submit(); 
       } 
      }); 
     }); 
    }); 
</script> 
</html> 

durch die Art und Weise. Wenn Sie HTML 5 verwenden und nichts tun, wird jede Eingabe mit der erforderlichen Eigenschaft von modernen Browsern automatisch überprüft. das ist der Grund, weil ich es nicht benutze, wenn Felder für spezielle Zeichen nicht gefiltert werden müssen.

Answer 5

Wenn $('#formid').submit() die fehlenden Felder nicht anzeigt, wie wenn wir auf Senden klicken, was ist dann mit dem Erstellen eines versteckten Senden-Buttons und dem Simulieren eines Klicks?

Wenn Sie so etwas wie die folgenden in Ihrer Form gebracht:

<input id="send" type="submit" style="display: none"/> 

Jetzt ist der JavaScript Teil:

$(document).ready(function(){ 
     $('#continuebtn').on('click', function(event){ 
      $('#send').trigger('click'); 
     }) 
    }); 

Sie werden sehen, dass, wenn Sie auf Ihrem #continuebtn klicken werden Sie bekommen die fehlenden Felder.

Der Browser weiß bereits, wo die fehlenden Felder sind. Es ist viel produktiver, es wiederzuverwenden, anstatt jQuery-Aufrufe zu schreiben und das Rad neu zu erfinden.

Ich glaube, dass dies nicht die beste Lösung ist, aber es funktioniert mit sehr wenig Modifikation unserer Code-Basis.