Afficher / cacher un input avec un required

Fermé
James007b4 Messages postés 15 Date d'inscription mercredi 21 juin 2017 Statut Membre Dernière intervention 22 août 2017 - Modifié le 22 août 2017 à 13:28
James007b4 Messages postés 15 Date d'inscription mercredi 21 juin 2017 Statut Membre Dernière intervention 22 août 2017 - 22 août 2017 à 13:47
Bonjour,

J'ai fais un code JS pour afficher cacher mes textbox et sa fonctionne.
Sauf que les radio buttons ( en required ) permettent d'affiche ou cacher l'input text ( sans mettre de require sa fonctionne )
Mais si je mets un required sur l'input et je le cache, la page veut plus valider ( le boutton submit ne fonctionne plus... )
Faudrait que si, c'est affiche alors faut obligatoirement remplir l'input sinon on passe à la suite.


<table border="0">
<tr><td align="left"><INPUT type ="radio" style="width:20px; height:20px;" name ="h1" value ="oui" onclick="afficher2('visible')" required /> Oui </td></tr>
<tr><td align="left"><INPUT type ="radio" style="width:20px; height:20px;" name ="h1" value ="non" onclick="afficher2('visible')" required /> Non </td></tr>
<tr><td align="left"><INPUT type ="radio" style="width:20px; height:20px;" name ="h1" value ="non applicable" onclick="afficher2('hidden')" required /> Non applicable</td></tr>
</table>
<br><div id="textbox1">
<INPUT type="textarea" name="h2" style="visibility:show" placeholder="Précisez" />
</div>
<script>
function afficher(etat)
{
document.getElementById("textbox1").style.visibility=etat;
}
</script>


Faut il utiliser l'AJAX ?

1 réponse

James007b4 Messages postés 15 Date d'inscription mercredi 21 juin 2017 Statut Membre Dernière intervention 22 août 2017
Modifié le 22 août 2017 à 13:48
J'ai trouvé !

Merci

<table border="0">
<tr><td align="left"><input type="radio" style="width:20px; height:20px;" name="A1" id="radio1" value="oui" onclick="si0()" required/> Oui </td></tr>
<tr><td align="left"><input type="radio" style="width:20px; height:20px;" name="A1" id="radio1" value="non" onclick="si0()" required/> Non </td></tr>
<tr><td align="left"><input type="radio" style="width:20px; height:20px;" name="A1" id="radio1" value="partiellement" onclick="si0()" required/> Partiellement
</table>

<INPUT type="textbox" id="textbox1" name="A2" style="visibility: show;"  placeholder="Précisez" />


<script type="text/javascript">
 

 function si0(){

  document.getElementById("textbox1").required = false;

   if(document.getElementById("radio1").checked == true)
   {
     document.getElementById("textbox1").style.visibility = 'hidden';  
     document.getElementById("textbox1").required = false;  
   }
   else
   {
     document.getElementById("textbox1").style.visibility = 'visible';
     document.getElementById("textbox1").required = true;   
   }

 }

</script>

Si c'est peux aider quelqu'un :)
0