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

Lorsqu'il existe un processus de validation très complexe (en particulier asynchrone), il existe une solution de contournement simple :

<form id="form1">
<input type="button" onclick="javascript:submitIfVeryComplexValidationIsOk()" />
<input type="submit" id="form1_submit_hidden" style="display:none" />
</form>
...
<script>
function submitIfVeryComplexValidationIsOk() {
    var form1 = document.forms['form1']
    if (!form1.checkValidity()) {
        $("#form1_submit_hidden").click()
        return
    }

    if (checkForVeryComplexValidation() === 'Ok') {
         form1.submit()
    } else {
         alert('form is invalid')
    }
}
</script>

Answer 2

Une autre façon de résoudre ce problème :

$('input').oninvalid(function (event, errorMessage) {
    event.target.focus();
});