web-dev-qa-db-fra.com

jQuery validator et datepicker click not validating

J'utilise le validateur jquery pour valider les entrées de texte. Le problème que j'ai est, si je clique sur soumettre, il affiche correctement tous les messages d'erreur. Cependant, sur l'entrée de datepicker, pour effacer le message d'erreur, je dois sélectionner le datepicker deux fois. c'est à dire; 1 clic pour sélectionner et il entre les données correctement. 2ème clic pour effacer le message d'erreur.

J'ai lu quelque part sur l'utilisation d'un événement "on" sur le sélecteur de date, alors j'ai essayé, mais cela n'a fait aucune différence. Je ne pense pas que ce soit codé correctement. Je suppose que les classes invalides et réussies font partie du script de validation. Ça vaut le coup d'essayer.

Que pourrait-il se passer ici. Merci

Code Sciprt

<script type="text/javascript">
$(function() {
        $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: '2011:2037',
            dateFormat: 'dd/mm/yy',
            minDate: 0,
            defaultDate: null
        }).on('changeDate', function(ev) {
    if($('#datepicker').valid()){
       $('#datepicker').removeClass('invalid').addClass('success');   
    }
 });

    });
</script>

code HTML

<label for"datepicker">
   <input id="datepicker" name="datepicker" type="text" />
</label>

code pertinent du validateur

Section Règles/Message

 datepicker:
    {
        required: true,
        date: true
    },

 datepicker:
    {
        required: " * required: You must enter a destruction date",
        date: "Can contain digits only"
    }
jqueryjquery-validate
24
user1532468

Citation OP:

"Je dois sélectionner deux fois le sélecteur de date. C'est-à-dire; 1 clic pour sélectionner et saisir les données correctement. 2ème clic pour effacer le message d'erreur."

En effet, la validation est normalement déclenchée sur les événements keyup et blur. Puisque vous utilisez un sélecteur de date pour interagir avec le champ, plutôt qu'avec le clavier, vous interférez avec les événements de déclenchement normaux.

Votre code est censé compenser, mais il est excessif ...

$(function() {
        $("#datepicker").datepicker({ ... })
.on('changeDate', function(ev) {
    if($('#datepicker').valid()){
       $('#datepicker').removeClass('invalid').addClass('success');   
    }
 });
    });

Vous devez uniquement appeler la méthode .valid() sur le champ chaque fois que la valeur change.

$(function() {
    $("#datepicker").datepicker({ ... })
        .on('changeDate', function(ev) {
            $(this).valid();  // triggers the validation test
            // '$(this)' refers to '$("#datepicker")'
        });
});

Cependant, c'est essentiellement le même que vous aviez auparavant.

Qu'est-ce que changeDate est censé être? Est-ce quelque chose de défini par votre plugin datepicker? Ce n'est pas un événement jQuery standard, donc probablement tout le problème. Essayez plutôt l'événement standard change ...

$(function() {
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange: '2011:2037',
        dateFormat: 'dd/mm/yy',
        minDate: 0,
        defaultDate: null
    }).on('change', function() {
        $(this).valid();  // triggers the validation test
        // '$(this)' refers to '$("#datepicker")'
    });
});
46
Sparky

La réponse de Sparky a très bien fonctionné pour moi, la seule chose que je changerais est au lieu d'utiliser l'identifiant, j'ai juste utilisé le jquery this dans la fonction on, c'est-à-dire:

    .on('change', function() {
        $(this).valid();  
    });

Cela le rend un peu plus général .. -D

4
dnrayzn

Si vous utilisez Jquery Form Validator ( http://www.formvalidator.net/ ) et que vous souhaitez utiliser bootstarp datepicker, ajoutez simplement class = "hasDatepicker" à l'élément input. Cela a fonctionné pour moi.

<input type="text" name='birth_date' class="form-control hasDatepicker" id="datepicker" value=""  data-validation="birthdate" data-validation-format="mm/dd/yyyy">
2
Suraj Chougule