Déclencher manuellement la validation d'un formulaire à l'aide de jQuery

Question

J'ai un formulaire avec plusieurs champs différents. J'ai un peu de jQuery qui affiche les ensembles de champs aux utilisateurs un par un. Pour les navigateurs qui supportent la validation HTML5, j'aimerais beaucoup l'utiliser. Cependant, j'ai besoin de le faire à mes conditions. J'utilise JQuery.

Lorsqu'un utilisateur clique sur un lien JS pour passer au champ suivant, j'ai besoin que la validation se fasse sur le champ actuel et bloque l'utilisateur pour qu'il puisse avancer s'il y a des problèmes.

Idéalement, lorsque l'utilisateur perd le focus sur un élément, la validation se produit.

J'utilise actuellement novalidate et jQuery. Je préférerais utiliser la méthode native :)

Answer 1

Il est assez facile d'ajouter ou de supprimer la validation HTML5 aux jeux de champs.

 $('form').each(function(){

    // CLEAR OUT ALL THE HTML5 REQUIRED ATTRS
    $(this).find('.required').attr('required', false);

    // ADD THEM BACK TO THE CURRENT FIELDSET
    // I'M JUST USING A CLASS TO IDENTIFY REQUIRED FIELDS
    $(this).find('fieldset.current .required').attr('required', true);

    $(this).submit(function(){

        var current     = $(this).find('fieldset.current')
        var next        = $(current).next()

        // MOVE THE CURRENT MARKER
        $(current).removeClass('current');
        $(next).addClass('current');

        // ADD THE REQUIRED TAGS TO THE NEXT PART
        // NO NEED TO REMOVE THE OLD ONES
        // SINCE THEY SHOULD BE FILLED OUT CORRECTLY
        $(next).find('.required').attr('required', true);

    });

});

Answer 2

J'ai l'impression de trouver l'astuce : Il suffit de supprimer le formulaire target puis utiliser un bouton de soumission pour valider le formulaire et afficher des conseils, vérifier si le formulaire est valide via JavaScript, puis poster ce que l'on veut. Le code suivant fonctionne pour moi :

<form>
  <input name="foo" required>
  <button id="submit">Submit</button>
</form>

---

<script>
$('#submit').click( function(e){
  var isValid = true;
  $('form input').map(function() {
    isValid &= this.validity['valid'] ;
  }) ;
  if (isValid) {
    console.log('valid!');
    // post something..
  } else
    console.log('not valid!');
});
</script>

Answer 3

Code Html :

<form class="validateDontSubmit">
....
<button style="dislay:none">submit</button>
</form>
<button class="outside"></button>

javascript (en utilisant Jquery) :

<script type="text/javascript">

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;
})

$(document).ready(function(){
// using button outside trigger click
    $('.outside').click(function() {
        $('.validateDontSubmit button').trigger('click');
    });
});
</script>

J'espère que cela vous aidera

Answer 4

Pour le champ de saisie

<input id="PrimaryPhNumber" type="text" name="mobile"  required
                                       pattern="^[789]\d{9}$" minlenght="10" maxLength="10" placeholder="Eg: 9444400000"
                                       class="inputBoxCss"/>

$('#PrimaryPhNumber').keyup(function (e) {
        console.log(e)
        let field=$(this)
        if(Number(field.val()).toString()=="NaN"){
            field.val('');
            field.focus();
            field[0].setCustomValidity('Please enter a valid phone number');
            field[0].reportValidity()
            $(":focus").css("border", "2px solid red");
        }
    })

Answer 5

$('#id').get(0).reportValidity();

Cette opération déclenche l'entrée dont l'ID est spécifié. Utilisez ".classname" pour les classes.