Il existe un formulaire avec deux champs de texte et une case à cocher, tous sont obligatoires et ont l'attribut requis.
Le bouton d'envoi ne doit être activé que si les entrées requises sont remplies et cochées.
Avec le code actuel, la validation du champ de texte semble bien fonctionner mais elle n'a pas d'effet sur la case à cocher.
<form action="#otherForm">
Name * <input name="otherForm-name1" placeholder="required" required> <br />
Tel * <input name="otherForm-surname" placeholder="required" required> <br />
<input type="checkbox" name="otherForm-chcekbox" required><label for="otherForm-chcekbox">I agree</label> <br />
<button id="otherForm-submitBtn" class="monitored-btn" type="submit">Submit</button>
</form>
<script>
const inputSelector = ':input[required]:visible';
function checkForm() {
// here, "this" is an input element
var isValidForm = true;
$(this.form).find(inputSelector).each(function() {
if (!this.value.trim()) {
isValidForm = false;
}
});
$(this.form).find('.monitored-btn').prop('disabled', !isValidForm);
return isValidForm;
}
$('.monitored-btn').closest('form')
// in a user hacked to remove "disabled" attribute, also monitor the submit event
.submit(function() {
// launch checkForm for the first encountered input,
// use its return value to prevent default if form is not valid
return checkForm.apply($(this).find(':input')[0]);
})
.find(inputSelector).keyup(checkForm).keyup();
</script>
5 Réponses :
Désactivez le bouton avec l'attribut de désactivation. Écoutez ensuite l'événement de modification de la case à cocher et supprimez l'attribut ou ajoutez-le.
<form action="#otherForm">
<input type="checkbox" name="otherForm-chcekbox" required><label for="otherForm-chcekbox">I agree</label> <br />
<button id="otherForm-submitBtn" class="monitored-btn" type="submit" disabled>Submit</button>
</form>
$(".otherForm-chcekbox").change(function() {
if(this.checked) {
if (checkForm()) {
$("otherForm-submitBtn").removeAttr("disabled");
}
} else {
$("otherForm-submitBtn").attr("disabled", "disabled");
}
});
Étant donné " Le bouton d'envoi ne doit être activé que si les entrées requises sont remplies et vérifiées. ", cela doit vérifier si les autres contrôles sont également valides.
@RobG oui a raté ça. J'ai mis à jour la réponse pour appeler la fonction checkForm avant de supprimer l'attribut.
N'utilisez pas non plus .attr () pour les attributs / accessoires booléens. utilisez plutôt .prop () .
@Terry. D'accord, bien sûr. Mais ils sont interchangeables, non? Y a-t-il un déficit de performance lié à l'utilisation d'attr? Ou est-ce juste le principe d'utiliser prop () pour tout ce qui n'est pas un attribut de chaîne?
Lorsque vous supprimez un attribut, vous ne pouvez pas le rajouter dans certains navigateurs: voir stackoverflow.com/questions/5874652/prop- vs-attr
CSS uniquement requis
<form action="#otherForm"> Name * <input name="otherForm-name1" placeholder="required" required> <br /> Tel * <input name="otherForm-surname" placeholder="required" required> <br /> <input type="checkbox" name="otherForm-chcekbox" required><label for="otherForm-chcekbox">I agree</label> <br /> <button id="otherForm-submitBtn" class="monitored-btn" type="submit">Submit</button> </form>
#otherForm-submitBtn {
enabled: false;
color: grey;
}
input[type='checkbox']:checked ~ #otherForm-submitBtn {
enabled: true;
color: black;
}
Étant donné " Le bouton d'envoi ne doit être activé que si les entrées requises sont remplies et vérifiées. ", cela doit vérifier si les autres contrôles sont également valides.
Bien essayé, mais le bouton "désactivé" est toujours cliquable (au moins en FF). Essayez de jouer avec la propriété pointer-events .
Merci @KoshVery Je pense au point RobG, dans le monde réel avec une forme complexe qui peut changer avec le temps, une fonction de script qui scanne les contrôles étiquetés de manière dynamique serait une meilleure solution ici.
L'événement Keyup ne fonctionnera pas sur une case à cocher. Il est également préférable de vérifier si un accessoire est coché au lieu d'une valeur dans une case à cocher. Essayez ceci:
const inputSelector = ':input[required]:visible';
function checkForm() {
// here, "this" is an input element
var isValidForm = true;
$(this.form).find(inputSelector).each(function() {
if (!this.value.trim() || (this.type == 'checkbox' && !this.checked)) {
isValidForm = false;
}
});
$(this.form).find('.monitored-btn').prop('disabled', !isValidForm);
return isValidForm;
}
$('.monitored-btn').closest('form')
// in a user hacked to remove "disabled" attribute, also monitor the submit event
.submit(function() {
// launch checkForm for the first encountered input,
// use its return value to prevent default if form is not valid
return checkForm.apply($(this).find(':input')[0]);
})
.find(inputSelector).on("keyup change", checkForm);
Je ferais cela de manière très similaire à la réponse de Kubwimana Adrien avec le rendu initial d'un bouton désactivé.
De plus, en général, il n'est pas considéré comme sûr de définir l'état initial des booléens de validation sur TRUE. Donc, changer un peu le code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form action="#otherForm">
Name * <input name="otherForm-name1" placeholder="required" required> <br />
Tel * <input name="otherForm-surname" placeholder="required" required> <br />
<input type="checkbox" name="otherForm-chcekbox" required><label for="otherForm-chcekbox">I agree</label> <br />
<button id="otherForm-submitBtn" class="monitored-btn" type="submit" disabled>Submit</button>
</form></body>
const inputSelector = ':input[required]:visible';
function checkForm() {
// here, "this" is an input element
var isValidForm = false;
$(this.form).find(inputSelector).each(function() {
if (((this.type != 'checkbox') && (this.value.trim() != "")) || (this.type == 'checkbox' && this.checked)) {
isValidForm = true;
}
else{
isValidForm = false
return false //break out of each loop
}
});
$(this.form).find('.monitored-btn').prop('disabled', !isValidForm);
return isValidForm;
}
$('.monitored-btn').closest('form')
// in a user hacked to remove "disabled" attribute, also monitor the submit event
.submit(function() {
// launch checkForm for the first encountered input,
// use its return value to prevent default if form is not valid
return checkForm.apply($(this).find(':input')[0]);
})
.find(inputSelector).on("keyup change", checkForm);
Vous devez vérifier cette condition à chaque fois que vous saisissez un utilisateur ou cliquez sur la case à cocher, et activez la désactivation par removeAttr et attr ..
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="#otherForm"> Name * <input name="otherForm-name1" placeholder="required" required> <br /> Tel * <input name="otherForm-surname" placeholder="required" required> <br /> <input type="checkbox" name="otherForm-chcekbox" id="otherForm-chcekbox" required><label for="otherForm-chcekbox">I agree</label> <br /> <button id="otherForm-submitBtn" class="monitored-btn" type="submit" disabled>Submit</button> </form>
$("form input").keyup(check);
$("form input:checkbox").on("click", check);
function check() {
if($("input[name='otherForm-name1']").val() != "" &&
$("input[name='otherForm-surname']").val() != "" &&
$("input[name='otherForm-chcekbox']").prop("checked") == true) {
$("#otherForm-submitBtn").removeAttr("disabled");
return;
}
$("#otherForm-submitBtn").attr("disabled",true);
}
Vous n'avez pas besoin d'une case à cocher dans ce formulaire. Remplacez-le simplement par un texte comme
En soumettant ce formulaire, j'accepte .@ KoshVery: dans de nombreuses juridictions, et selon le contexte, la case à cocher est obligatoire.
@RobG, pourriez-vous s'il vous plaît fournir des liens vers les lois correspondantes?
@KoshVery Ce n'est pas une sorte de forum de conseils juridiques, mais dans de nombreux cas, vous avez besoin du consentement explicite de l'utilisateur au lieu d'un consentement implicite. Un exemple sera le RGPD, où les utilisateurs doivent obtenir un consentement explicite pour que leurs données soient collectées.
@ KoshVery: les clients pour lesquels j'ai travaillé ont des conseils juridiques indiquant qu'une case à cocher (ou un widget d'interface utilisateur similaire) est nécessaire lorsqu'un consommateur est invité à accepter les termes et conditions, je les mets donc. Ils ne peuvent pas être pré- cochée, l'utilisateur doit effectivement cocher la case et la cocher. Si vous travaillez sur un site de commerce électronique grand public, vous le découvrirez bientôt, ce sera probablement une exigence explicite si la juridiction l'exige (et que la BA a fait son travail correctement). Si vous en voulez plus, demandez votre propre conseil.
Merci à tous les gars. Je n'ai pas demandé un avis juridique, mais des liens de preuve.
Ici, vous allez @KoshVery ico.org.uk/media/about-the-ico/consultations/2013551/...