Désactiver le bouton d’envoi jusqu’à ce que les champs de saisie soient remplis

Votre liaison d’événement est uniquement sur le document prêt.

Donc, il n’y a pas d’auditeur lorsque vous modifiez quelque chose.

Faites ceci à la place:

 $(document).ready(function (){ validate(); $('#inputName, #inputEmail, #inputTel').change(validate); }); function validate(){ if ($('#inputName').val().length > 0 && $('#inputEmail').val().length > 0 && $('#inputTel').val().length > 0) { $("input[type=submit]").prop("disabled", false); } else { $("input[type=submit]").prop("disabled", true); } } 

Votre code actuel convient, mais ne répond pas aux événements de l’utilisateur, c’est là que vous avez déclenché.

 $('#inputName, #inputEmail, #inputTel').keyup(function(){ if($(this).val().length > 0){ $("input[type=submit]").prop("disabled", false); }else{ $("input[type=submit]").prop("disabled", true); } }); 

Modifier réellement, cela ne fonctionnera pas. parce que l’un de ces éléments rendra le bouton de soumission activé, quelles que soient les autres. Je vais corriger momentanément.

Edit Voici le brouillon de solution, il pourrait probablement être plus joli, mais sera certainement un bon sharepoint départ.

 var toValidate = $('#inputName, #inputEmail, #inputTel'), valid = false; toValidate.keyup(function () { if ($(this).val().length > 0) { $(this).data('valid', true); } else { $(this).data('valid', false); } toValidate.each(function () { if ($(this).data('valid') == true) { valid = true; } else { valid = false; } }); if (valid === true) { $('input[type=submit]').prop('disabled', false); }else{ $('input[type=submit]').prop('disabled', true); } }); 

Et voici votre jsFiddle illustrant cette méthode

change la propriété d’un bouton et non l’atsortingbut … utilise prop() au lieu de attr()

 $(document).ready(function (){ if ($('#inputName, #inputEmail, #inputTel').val().length > 0) { $("input[type=submit]").prop("disabled", false); } else { $("input[type=submit]").prop("disabled", true); } }); 

et je suppose que cela n’a aucun sens puisque vous n’avez pas de lien d’événement à ce sujet .. cela ne fera que vérifier si l’entrée a une valeur dans document.ready ou non .. cependant, le fait de lier un événement ou non dépend de vous .. mais ces raisons particulières prop() été introduites dans la version ultérieure de jquery …

mis à jour

après avoir vu les commentaires ci-dessous,

 $(function(){ validate(); $('input[type="text"]').keyup(validate); //you can use your multiple id selector instead of the atsortingbute selector that i am using }); function validate() { var inputvalue = $('input[type="text"]').filter(function (n) { return this.value.length > 0; }) if (inputvalue.length == $('input[type="text"]').length) { $("input[type=submit]").prop("disabled", false); } else { $("input[type=submit]").prop("disabled", true); } } 

cela devrait fonctionner pour n’importe quel nombre d’entrées avec le type comme texte (pas besoin de changer les codes javascript / jquery) … voici le violon

vous devez exécuter la commande if à nouveau pour activer cela peut être fait lors d’un événement de change d’entrée

 function updateSubmit(){ if ($('#inputName').val().length+$('#inputEmail').val().length+$('#inputTel').val().length > 2) { $("input[type=submit]").prop("disabled", false); } else { $("input[type=submit]").prop("disabled", true); } } $(document).ready(function (){ updateSubmit(); $('#inputName, #inputEmail, #inputTel').on('change',function(){ updateSubmit(); }); }); 

Utilisez le formulaire onsubmit. Agréable et propre. Vous n’avez pas à vous soucier du changement et de l’activation des touches. Ne vous inquiétez pas des problèmes de keyup et de focus.

http://www.w3schools.com/jsref/event_form_onsubmit.asp

 
 ... 
 function validateCreditCardForm(){ var result = false; if (($('#billing-cc-exp').val().length > 0) && ($('#billing-cvv').val().length > 0) && ($('#billing-cc-number').val().length > 0)) { result = true; } return result; }