HTML5-Formular validieren, wenn Formularfelder dynamisch ausgefüllt werden müssen

Ich habe ein Bootstrap-Formular mit einigen Feldern. Standardmäßig sind das erste und das zweite Feld obligatorisch.HTML5-Formular validieren, wenn Formularfelder dynamisch ausgefüllt werden müssen

Nun, wenn das 3. Feld ausgefüllt ist, wird das 4. Pflichtfeld. Ähnlich, wenn das vierte Feld ausgefüllt ist, wird das dritte Pflichtfeld.

Wenn jedoch beide 3. & Felder nicht ausgefüllt sind, sind sie nicht obligatorisch. Ich verwende hier auch die HTML5-Formularvalidierung.

Hier ist mein Code:

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <script> 
      $(function(){ 

       $("#myForm").submit(function(){ 
        checkAll(); 

        return false; 
       }) 

      }); 

      function checkAll() { 
       if(($('#comp').val()!== "") || ($('#weburl').val()!=="")) { 
        $('#comp').prop('required',true); 
        $('#weburl').prop('required',true); 

       } 
       else { 
        $('#comp').prop('required',false); 
        $('#weburl').prop('required',false); 
       } 
      } 
     </script> 
    </head> 
    <body> 
     <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myFormModal">Add Details</button> 

     <div id="myFormModal" class="modal fade" role="dialog"> 
      <div class="modal-dialog"> 

      <div class="modal-content"> 
       <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Add details</h4> 
       </div> 
       <div class="modal-body"> 
       <form class="form-horizontal" id="myForm" name="contact" action="#"> 
        <div class="form-group"> 
        <label class="control-label col-sm-3" for="dor">Date of Registeration:</label> 
        <div class="col-sm-8"> 
         <input type="date" class="form-control" id="dor" name="dor" required> 
        </div> 
        </div> 
        <div class="form-group"> 
        <label class="control-label col-sm-3" for="name">Name:</label> 
        <div class="col-sm-8"> 
         <input type="text" class="form-control" id="name" name="name" required> 
        </div> 
        </div> 
        <div class="form-group"> 
        <label class="control-label col-sm-3" for="comp">Company:</label> 
        <div class="col-sm-8"> 
         <input type="text" class="form-control" id="comp" name="comp"> 
        </div> 
        </div> 
        <div class="form-group"> 
        <label class="control-label col-sm-3" for="weburl">Website:</label> 
        <div class="col-sm-8"> 
         <input type="url" class="form-control" id="weburl" name="weburl"> 
        </div> 
        </div> 
        <hr /> 
        <div class="form-group">   
        <div class="col-sm-offset-3 col-sm-3"> 
         <button class="btn btn-primary btn-sm">Save</button> 
        </div> 
        <div class="col-sm-3"> 
         <button type="reset" class="btn btn-primary btn-sm">Reset</button> 
        </div> 
        <div class="col-sm-3"> 
         <button type="button" class="btn btn-primary btn-sm close-external-modal" data-dismiss="modal">Close</button> 
        </div> 
        </div> 
       </form> 
       </div> 
      </div> 
      </div> 
     </div> 
    </body> 
</html>

Quelle

2017-04-09 Sunny

Was ist Ihre Frage? Was funktioniert nicht? –

Wie stelle ich sicher, dass die Website obligatorisch wird, wenn das Unternehmen ausgefüllt wird. Und wenn die Website ausgefüllt ist, wird das Unternehmen obligatorisch. Wenn weder Firma noch Website ausgefüllt sind, sind beide Felder nicht zwingend erforderlich. Das Datum der Felder Registrierung und Name ist jedoch immer obligatorisch. – Sunny

Sie können einen Event-Handler an die Elemente anhängen und dies tun, bevor Sie sogar das Formular abzuschicken. Etwas wie:

$("#comp, #weburl").on('input', function() { 
    if($("#comp").val() || $("#weburl").val()) { 
    $("#comp").prop('required', true); 
    $("#weburl").prop('required', true); 
    } 
    else { 
    $("#comp").removeAttr('required'); 
    $("#weburl").removeAttr('required'); 
    } 
});

https://jsfiddle.net/yscy8Lrr/1/

(den Code Ignorieren Sie die Textbox Farbe zu ändern, habe ich es nur um zu zeigen, dass die erforderliche Eigenschaft ist in der Tat hinzugefügt werden und entfernt)

Dadurch wird Sowohl #comp als auch #weburl sind erforderlich, wenn beide einen Wert haben und nicht erforderlich sind, wenn beide keine Zeichen enthalten. Wenn Sie HTML5 verwenden und browserübergreifende Unterstützung benötigen, sollten Sie auch die Funktion checkValidity() beim Senden des Formulars aufrufen, da Safari das Attribut required nicht unterstützt.

Quelle

2017-04-09 08:45:38

Vielen Dank! – Sunny

HTML5-Formular validieren, wenn Formularfelder dynamisch ausgefüllt werden müssen

Antwort

Verwandte Themen