Ändern Sie den erforderlichen Status eines Felds entsprechend der Optionsfeldauswahl

Question

Das ist der Fall: Ich habe 2 Radiobuttons, die 2 anderen Block des Codes über Javascript anzeigen/verbergen, wenn ausgewählt. Der HTML-Code, den show/hide enthält, enthält andere Felder, die erforderlich sind. Also verstecke ich sie einfach über das Display: keine nach Auswahl des Radio-Buttons. Jedenfalls kann in diesem Fall mein Formular nicht ausgelöst werden, da ich die erforderlichen Felder füllen sollte, die dem Benutzer entsprechend der Auswahl der Optionsschaltflächen sowieso verborgen sind. Was ich also brauche, ist das Entfernen/Hinzufügen des "erforderlichen" Zustands bei der Umkehrung der Radioauswahl.

Wie könnte ich das tun?

<form action="./assets/php/sendmail.php" class="form common_font" method="post"> 
    <div class="choosecontact"> 
     <input type="radio" id="radio01" name="radio" value="telefonopref" required /> 
     <label for="radio01"><span></span>Contattatemi per <b>telefono</b></label> 
     <br> 
     <input type="radio" id="radio02" name="radio" value="emailpref" /> 
     <label for="radio02"><span></span>Contattatemi per <b>e-mail</b></label> 
    </div> 

    <div id="telefonopref"> 
     <label class="selectcustom"> 
      <select class="dropdown" required> 
       <option value="saab">Chiamatemi tra 8.30 - 12.30</option> 
       <option value="vw">Chiamatemi tra 14.30 - 18.30</option> 
      </select> 
     </label> 

     <div class="field inline-block name"> 
      <label for="input_text" class="field-label common_font regular medium_font_size form_color">Numero di telefono</label> 
      <input id="input_text" name="TEXT" class="field-input" type="text" required> 
     </div> 
    </div> 

    <div id="emailpref" class="field inline-block email"> 
     <label for="input_email" class="field-label common_font regular medium_font_size form_color">Indirizzo Email (consiglio: email personale che controlli)</label> 
     <input id="input_email" name="EMAIL" class="field-input" type="EMAIL" required> 
    </div> 


    <div id="otherformpart"> 
     <div class="field msg"> 
      <label for="input_msg" class="field-label common_font regular medium_font_size form_color">Vuoi aggiungere qualcosa? Scrivilo qui.</label> 
      <input id="input_msg" name="TEXT" class="field-input" type="text"> 
     </div> 

     <div class="inline-block row"> 
      <div class="col-xs-2"> 
       <input id="input_privacycheck" name="PRIVACYCHECK" class="privacycheck" type="checkbox" required> 
      </div> 
      <div class="col-xs-10"> 
       <label for="input_checkprivacy" class="privacyconsent">Acconsento al trattamento dei dati personali come indicato nella Privacy Policy ai fini di questo servizio.</label> 
      </div> 
     </div> 

     <button type="submit" class="send-btn center common_element_color common_font medium body_font_size white"><span class="fa fa-chevron-right"></span> Invia richiesta</button> 
    </div> 
</form> 

Und das ist mein Javascript Teile von HTML zum Anzeigen/Verbergen nach readio Taste Auswahl:

$('input[type=radio][name=radio]').change(function() { 
    $('#emailpref').css("display","none"); 
    $('#telefonopref').css("display","none"); 
    console.log($(this).val()); 
    var fieldToShow = $(this).val(); 
    $("#" + fieldToShow).css("display","block"); 
}); 

$('input[type=radio][name=radio]').change(function() { 
    $('#otherformpart').css("display","none"); 
    console.log($(this).val()); 
    var fieldToShow = $(this).val(); 
    $("#otherformpart").css("display","block"); 
}); 

Answer 1

Sie können mit removeAttr Funktion erforderliches Attribut entfernen. Aber um auf der sicheren Seite zu sein, ist es auch besser, die Requisite zu deaktivieren.

versuchen Sie es unten.

$('input[type=radio][name=radio]').change(function() { 
 
    $('#emailpref').css("display","none").removeAttr('required').prop('required', false); 
 

 
    $('#telefonopref').css("display","none"); 
 
    console.log($(this).val()); 
 
    var fieldToShow = $(this).val(); 
 
    $("#" + fieldToShow).css("display","block").css("display","block").attr('required', 'true').prop('required', true); 
 
}); 
 

 
$('input[type=radio][name=radio]').change(function() { 
 
    
 
    $('#otherformpart').css("display","none").removeAttr('required').prop('required', false); 
 
    console.log($(this).val()); 
 
    var fieldToShow = $(this).val(); 
 
    $("#otherformpart").css("display","block").attr('required', 'true').prop('required', true); 
 
});

Answer 2

Ich habe mich auf diese Weise gelöst. Nur ein wenig Bearbeitung von HTML-Code und ein neues Skript.

HTML-Code:

<form action="./assets/php/sendmail.php" class="form common_font" method="post"> 
    <div class="choosecontact"> 
     <input type="radio" id="radiotel" name="radio" value="telefonopref" required /> 
     <label for="radiotel"><span></span>Contattatemi per <b>telefono</b></label> 
     <br> 
     <input type="radio" id="radioemail" name="radio" value="emailpref" /> 
     <label for="radioemail"><span></span>Contattatemi per <b>e-mail</b></label> 
    </div> 

    <div id="telefonopref"> 
     <label class="selectcustom"> 
      <select id="orariotel" class="dropdown" required> 
       <option value="saab">Chiamatemi tra 8.30 - 12.30</option> 
       <option value="vw">Chiamatemi tra 14.30 - 18.30</option> 
      </select> 
     </label> 

     <div class="field inline-block name"> 
      <label for="input_tel" class="field-label common_font regular medium_font_size form_color">Numero di telefono</label> 
      <input id="input_tel" name="TEXT" class="field-input" type="text"> 
     </div> 
    </div> 

    <div id="emailpref" class="field inline-block email"> 
     <label for="input_email" class="field-label common_font regular medium_font_size form_color">Indirizzo Email (consiglio: email personale che controlli)</label> 
     <input id="input_email" name="EMAIL" class="field-input" type="EMAIL" required> 
    </div> 


    <div id="otherformpart"> 
     <div class="field msg"> 
      <label for="input_msg" class="field-label common_font regular medium_font_size form_color">Vuoi aggiungere qualcosa? Scrivilo qui.</label> 
      <input id="input_msg" name="TEXT" class="field-input" type="text"> 
     </div> 

     <div class="inline-block row"> 
      <div class="col-xs-2"> 
       <input id="input_privacycheck" name="PRIVACYCHECK" class="privacycheck" type="checkbox" required> 
      </div> 
      <div class="col-xs-10"> 
       <label for="input_checkprivacy" class="privacyconsent">Acconsento al trattamento dei dati personali come indicato nella Privacy Policy ai fini di questo servizio.</label> 
      </div> 
     </div> 

     <button type="submit" class="send-btn center common_element_color common_font medium body_font_size white"><span class="fa fa-chevron-right"></span> Invia richiesta</button> 
    </div> 
</form> 

JS-Code:

/*--------------------------- 
    required/not required according to radio selection 
----------------------------*/ 
$('#radiotel').change(function() { 
    if(this.checked) { 
     $('#input_email').prop('required', false); 
     $('#input_tel').prop('required', true); 
     $('#orariotel').prop('required', true); 
     } else { 
     $('#input_email').prop('required', true); 
     $('#input_tel').prop('required', false); 
     $('#orariotel').prop('required', false); 
    } 
}); 

$('#radioemail').change(function() { 
    if(this.checked) { 
     $('#input_email').prop('required', true); 
     $('#input_tel').prop('required', false); 
     $('#orariotel').prop('required', false); 
     } else { 
     $('#input_email').prop('required', false); 
     $('#input_tel').prop('required', true); 
     $('#orariotel').prop('required', true); 
    } 
});