Champ obligatoire après que la case à cocher est cochée

Je suis très novice en JavScript et j'essaie de créer un formulaire qui nécessite que des informations soient entrées dans un champ après avoir coché une case, en basculant une classe requise. J'ai essayé pendant deux jours et je suis incapable de faire de la "Date de début" un champ obligatoire si la case "Gymnase" est cochée. Toute aide serait géniale.Champ obligatoire après que la case à cocher est cochée

Voici ce que j'ai jusqu'à présent:

<!DOCTYPE html> 
    <html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script> 
    <script type="text/javascript">  

    $(document).ready(function(){ 
     $("#gym").change(function(){    
      $("#togg1").toggle(this.checked); 
      $("#startDate").toggleClass("required"); 
      $("#endDate").toggleClass("required"); 
      $("#startTime").toggleClass("required"); 
      $("#endTime").toggleClass("required"); 

    if(this.checked){ 
      $("#startDate").attr('required','required'); 
      $("#endDate").attr('required','required'); 
      $("#startTime").attr('required','required'); 
      $("#endTime").attr('required','required'); 
     } 
     else{ 
      $("#startDate").removeAttr('required') 
      $("#endDate").removeAttr('required') 
      $("#startTime").removeAttr('required') 
      $("#endTime").removeAttr('required') 
     } 

     }); 
    }); 

    </script> 


    </head> 
    <body> 


    <div id="courseForm" style="width: 500px; border: 1px solid #000; padding: 50px 0 50px 50px;margin: 0 auto;"> 
    <form id="serviceForm" action="#" onSubmit="required(this);" method="POST" enctype="text/plain"> 
    <input name="orgid" type="hidden" value="000001" /> 
    <input name="retURL" type="hidden" value="#" /> 
    <label for="company">* Agency Requesting Facility:</label> 
    <br /> 
    <input id="company" required="required" maxlength="50" name="company" size="50" type="text" /> 
    <br /> 
    <br /> 
    <label for="name">* Agency Contact:</label> 
    <br /> 
    <input id="name" required="required" maxlength="50" name="name" size="50" type="text" /> 
    <br /> 
    <br /> 
    <label for="phone">* Contact Phone Number:</label> 
    <br /> 
    <input id="phone" required="required" maxlength="14" name="phone" size="14" type="text" /> 
    <br /> 
    <br /> 
    <br />Courses offered 
    <br /> 

<input id="gym" name="gym" type="checkbox" value="1" />Gymnasium 
    <br /> 
    <span id="togg1" style="display:none"> 
      <span id="togg2" style="display:inline"> 
       <lable for="startDate">* Start Date:</lable> 
        <input id="startDate" maxlength="10" name="startDate" size="10" /> 
      </span> 
      <span id="togg2" style="display:inline"> 
       <lable for="endDate">* End Date:</lable> 
        <input id="endDate" maxlength="10" name="endDate" size="10" /><br /><br /> 
      </span> 
      <span id="togg2" style="display:inline"> 
       <lable for="startTime">* Start Time:</lable> 
        <input for="startTime" maxlength="7" name="startTime" size="7" /> 
      </span> 
      <span id="togg2" style="display:inline"> 
       <lable for="endTime">* End Time:</lable> 
        <input for="endTime" maxlength="7" mane="endTime" size="7" /><br /> 
      </span> 
    </span> 

    <br /> 
    <br /> 
    <label for="description">Comments:</label> 
    <br /> 
    <textarea name="description" cols="40" rows="5"></textarea> 
    <br /> 
    <br />* denotes required fields 
    <br /> 
    <input type="submit" name="submit" id="submit" value="SUBMIT" /> 
</form> 
</div> 
</body> 
</html>

Source

2013-03-29 Brandon

J'ai modifié ma réponse et donné un jsFiddle, je pense que la solution est là. – netadictos

Vous oubliez d'ajouter « nécessaire » attribuer à « Date de début »

$(document).ready(function(){ 
    $("#gym").change(function(){    
     $("#togg1").toggle(this.checked); 
     $("#startDate").toggleClass("required"); 

     if(this.checked){ 
      $("#startDate").attr('required','required'); 
     }else{ 
      $("#startDate").removeAttr('required') 
     } 

    }); 
});

Source

2013-03-29 19:21:57 Adi

Cela a bien fonctionné. J'ai changé mon message initial pour refléter les changements. J'essaye de mettre en application ceci dans 4 champs mais les champs de temps ne fonctionnent pas. Pouvez-vous me dire ce que je fais mal? – Brandon

Votre question d'origine a une réponse. C'est un problème entièrement nouveau. Dans de tels scénarios, postez-le comme une question distincte. . Le problème avec 'id' est le même pour tous les éléments d'entrée. Lisez un peu sur le fonctionnement des sélecteurs jquery. – Adi

Oh, j'avais l'entrée pour le temps défini comme "pour" pas "id". Merci beaucoup pour votre aide. – Brandon

Vous appelez une fonction « nécessaire » dans le « onSubmit ». Ce n'est pas nécessaire et erroné car la fonction "required" n'existe pas.

Ensuite, vous devez ajouter la ligne suivante:

$("#serviceForm").validate();

Dans un "$ (document) .ready" appel afin qu'il soit exécuté après DOM a été chargé.

Ici vous avez un exemple de la façon dont cela fonctionnerait:

http://jsfiddle.net/4rscN/

J'ai supposé que vous utilisez le plugin suivant: http://docs.jquery.com/Plugins/Validation

Sinon, vous devez l'ajouter.

Pour le plugin validate, je pense que vous devez utiliser la classe requise, pas l'attribut requis. Vous mélangez la classe requise avec l'attribut requis, qui est un attribut que vous pouvez utiliser en HTML5, mais tenez toujours compte du fait que tous les navigateurs ne le prennent pas en charge.

Pour une bonne référence à ce sujet:

http://caniuse.com/#search=required

Source

2013-03-29 19:21:50 netadictos

Merci pour votre réponse. Je n'ai pas réussi à le faire fonctionner, mais je l'utiliserai à l'avenir. – Brandon

Champ obligatoire après que la case à cocher est cochée

Répondre

Questions connexes