web-dev-qa-db-fra.com

Validation de la case à cocher JavaScript simple

Je travaille habituellement avec PHP, donc malheureusement, je ne connais pas certains principes de base de JS. C’est tout ce que je veux accomplir - j’ai vu de nombreux articles sur ce sujet, mais ils dépassent généralement ce dont j’ai besoin.

Voici mon formulaire:

 <input type="checkbox" name="checkbox" value="check"  />
 <input type="submit" name="email_submit" value="submit" onclick="----??----"  />

La case à cocher est un simple "Je suis d'accord". Je veux que le bouton d'envoi soit activé et il ne sera soumis que si cette case est cochée.

Voici la chose: je veux le moyen simple, tricher - pas de méthodes - juste un code en ligne sous cette forme (en supposant que ce ne soit pas trop long?). Ce n'est pas une page publique, j'ai juste besoin de quelque chose de simple et rapide avec ce type de validation. Si sa case n'est pas cochée, il lancera une alerte (); si sa case est cochée, il sera envoyé par la poste via php et se poursuivra normalement.

javascripthtmlformsvalidation
12
KickingLettuce

Vous pouvez utiliser:

 if(!this.form.checkbox.checked)
{
    alert('You must agree to the terms first.');
    return false;
}

( page de démonstration ).

<input type="checkbox" name="checkbox" value="check"  />
<input type="submit" name="email_submit" value="submit" onclick="if(!this.form.checkbox.checked){alert('You must agree to the terms first.');return false}"  />
  • Renvoyer false à partir d'un gestionnaire d'événements en ligne empêchera l'action par défaut d'avoir lieu (dans ce cas, l'envoi du formulaire).
  • ! est l'opérateur booléen NON .
  • this est le bouton d'envoi car il s'agit de l'élément auquel le gestionnaire d'événements est attaché.
  • .form est la forme dans laquelle se trouve le bouton de soumission.
  • .checkbox est le contrôle nommé "case à cocher" dans ce formulaire.
  • .checked est vrai si la case à cocher est cochée et faux si la case à cocher est décochée.
29
PleaseStand

Pour l'instant, pas besoin de jquery ou php. Utilisez uniquement l'attrbute d'entrée HTML5 "obligatoire" comme ici

 <form>
        <p>
            <input class="form-control" type="text" name="email" />
            <input type="submit" value="ok" class="btn btn-success" name="submit" />
            <input type="hidden" name="action" value="0" />
        </p>
        <p><input type="checkbox" required name="terms">I have read and accept <a href="#">SOMETHING Terms and Conditions</a></p>
 </form>

Cela validera et empêchera toute soumission avant que la case à cocher ne soit cochée. Solution indépendante de la langue car générée par le navigateur Web de l'utilisateur.

5
PrestaShark

Vous pouvez faire quelque chose comme ça:

<form action="../" onsubmit="return checkCheckBoxes(this);">
    <p><input type="CHECKBOX" name="MyCheckbox" value="This..."> This...</p>
    <p><input type="SUBMIT" value="Submit!"></p>
</form>

<script type="text/javascript" language="JavaScript">
<!--
function checkCheckBoxes(theForm) {
    if (
    theForm.MyCheckbox.checked == false) 
    {
        alert ('You didn\'t choose any of the checkboxes!');
        return false;
    } else {    
        return true;
    }
}
//-->
</script>

http://lab.artlung.com/validate-checkbox/

Bien que moins lisible à mon humble avis, cela peut être fait sans une définition de fonction distincte comme celle-ci:

<form action="../" onsubmit="if (this.MyCheckbox.checked == false) { alert ('You didn\'t choose any of the checkboxes!'); return false; } else { return true; }">
    <p><input type="CHECKBOX" name="MyCheckbox" value="This..."> This...</p>
    <p><input type="SUBMIT" value="Submit!"></p>
</form>
4
Eric J.

Vous pouvez faire ce qui suit:

<form action="/" onsubmit="if(document.getElementById('agree').checked) { return true; } else { alert('please agree'); return false; }">
    <input type="checkbox" name="checkbox" value="check" id="agree" />
    <input type="submit" name="email_submit" value="submit" />
</form>​

Voici une démo de travail - http://jsfiddle.net/Ccr2x/

3
tjscience
var confirm=document.getElementById("confirm").value;
         if((confirm.checked==false)
         {
         alert("plz check the checkbox field");
         document.getElementbyId("confirm").focus();
         return false;
         }
2
siva

Si l'identifiant de la case "Supprimer", alors pour l'événement "onclick" du bouton submit, la fonction JavaScript peut être la suivante:

html:
<input type="checkbox" name="Delete" value="Delete" id="Delete"></td>
<input type="button" value="Delete" name="delBtn" id="delBtn" onclick="deleteData()">

script:
<script type="text/Javascript">
    function deleteData() {
        if(!document.getElementById('Delete').checked){
            alert('Checkbox not checked');
            return false;
        }
</script>
1
Mahesh

Si votre case à cocher a un identifiant de 'case à cocher':

 if(document.getElementById('checkbox').checked == true){ // code here }

HTH

1
Jordizle

Un autre moyen simple est de créer une fonction et de vérifier si les cases à cocher sont cochées ou non, et de désactiver un bouton de cette façon à l’aide de jQuery.

HTML: 

<input type="checkbox" id="myCheckbox" />
<input type="submit" id="myButton" />

JavaScript:

var alterDisabledState = function () {

var isMyCheckboxChecked = $('#myCheckbox').is(':checked');

     if (isMyCheckboxChecked) {
     $('myButton').removeAttr("disabled");
     } 
     else {
             $('myButton').attr("disabled", "disabled");
     }
}

Vous avez maintenant un bouton désactivé jusqu'à ce que la case à cocher soit cochée, et vous bénéficiez désormais d'une meilleure expérience utilisateur. Je voudrais cependant vous assurer que vous faites toujours la validation côté serveur.

1
maxshuty