web-dev-qa-db-fra.com

Rendre le bouton d'envoi inactif jusqu'à ce que les champs soient remplis

J'utilise RSForms! Pro et moi avons un formulaire qui a 4 champs qui doivent être complétés. Existe-t-il un moyen de ne pas activer le bouton Soumettre tant que tous les champs ne sont pas renseignés?

J'ai essayé ce qui suit mais cela ne fonctionne pas correctement:

function validate(){
    if ($('#FullName').val().length   >   0   &&
        $('#Email').val().length  >   0   &&
        $('#VenueName').val().length  >   0   &&
        $('#VenuePostcode').val().length    >   0) {
        $("input[type=submit]").prop("disabled", false);
    }
    else {
        $("input[type=submit]").prop("disabled", true);
jquery
2
RustyJoomla

Je vous suggère de commencer par désactiver le bouton d'envoi à l'aide de jQuery (pour éviter les boutons désactivés pour les utilisateurs non-javascript):

jQuery("#Submit").prop('disabled', true);

Ensuite, utilisez ce code pour activer le bouton d'envoi si tous les champs sont remplis:

var toValidate = jQuery('#FullName, #Email, #VenueName, #VenuePostcode'),
    valid = false;
toValidate.keyup(function () {
    if (jQuery(this).val().length > 0) {
        jQuery(this).data('valid', true);
    } else {
        jQuery(this).data('valid', false);
    }
    toValidate.each(function () {
        if (jQuery(this).data('valid') == true) {
            valid = true;
        } else {
            valid = false;
        }
    });
    if (valid === true) {
        jQuery("#Submit").prop('disabled', false);
    } else {
        jQuery("#Submit").prop('disabled', true);
    }
});

Code modifié de cet article sur StackOverflow.

Démo rapide: http://jsfiddle.net/ddxqu7yy/

2
johanpw