Comment forcer une validation de formulaire html5 sans la soumettre via JavaScript / jQuery

Question

J'ai ce formulaire dans mon application et je le soumettrai via ajax, mais je veux utiliser html5 pour la validation côté client. Je veux donc pouvoir forcer la validation du formulaire via javascript / jquery. C'est possible?

MODIFIER*

Je veux déclencher la validation sans soumettre le formulaire.

Answer 1

Pour vérifier si un certain domaine est valide, utilisez :

Pour vérifier si le formulaire est valide, utilisez :

Si vous souhaitez afficher les messages d’erreur native disposant de certains navigateurs (tels que le Chrome), malheureusement la seule façon de le faire est en soumettant le formulaire, comme ceci :

J’espère que cela aide. N’oubliez pas que HTML5 validation n’est pas pris en charge dans tous les navigateurs.

Answer 2

J’ai trouvé cette solution à fonctionné pour moi. Il suffit d’appeler un wlike de fonction javascript ceci : action="javascript:myFunction() ; » Ensuite, vous avez la validation html5... vraiment simple  :-)

Answer 3

Voici une façon plus générale qui est un peu plus propre:

Créez votre formulaire comme ceci (peut-être une forme mannequin qui ne fait rien):

<form class="validateDontSubmit">
...

Lier toutes les formes que vous n'avez pas vraiment envie de soumettre:

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

Maintenant, disons que vous avez un <a> (à l'intérieur de l' <form>) que sur cliquez vous souhaitez valider le formulaire:

$('#myLink').click(function(e){
  //Leverage the HTML5 validation w/ ajax. Have to submit to get em. Wont actually submit cuz form
  //has .validateDontSubmit class
  var $theForm = $(this).closest('form');
  //Some browsers don't implement checkValidity
  if (( typeof($theForm[0].checkValidity) == "function" ) && !$theForm[0].checkValidity()) {
     return;
  }

  //if you've gotten here - play on playa'
});

Quelques notes ici:

• J'ai remarqué que vous n'avez pas à soumettre le formulaire de validation à se produire - l'appel à l' checkValidity() est suffisante (au moins dans chrome). Si d'autres pourraient s'ajouter des commentaires à tester cette théorie sur les autres navigateurs je vais mettre à jour cette réponse.
• La chose qui déclenche la validation n'a pas à être à l'intérieur de l' <form>. C'était juste un endroit propre et flexible pour une solution..

Answer 4

Vous parlez de deux choses différentes « HTML5 validation » et la validation de formulaire HTML à l’aide de javascript/jquery.

HTML5 « a » des options intégrées de validation d’un formulaire. Comme l’utilisation d’attribut « required » sur un champ, qui pourrait (basé sur l’application de navigateur) échec d’envoi d’un formulaire sans utiliser javascript/jquery.

Avec javascrip/jquery, vous pouvez faire quelque chose comme ça

Answer 5

J'ai eu une situation assez complexe, où j'ai besoin de plusieurs boutons de soumission pour traiter des choses différentes. Par exemple, Enregistrer et Supprimer.

La base était qu'il était aussi discret, donc je ne pouvais pas juste faire un bouton normal. Mais il voulait aussi utiliser la validation html5.

Ainsi l'événement submit a été remplacée dans les cas où l'utilisateur a appuyé sur la touche entrée pour déclencher l'prévue par défaut de soumission; dans cet exemple enregistrer.

Ici, ce sont les efforts de la transformation de la forme à continuer à travailler avec/sans javascript et html5 de validation, avec à la fois présenter et cliquez sur événements.

jsFiddle Démo - la validation HTML5 avec soumettre et cliquez sur les substitutions

xHTML

<form>
    <input type="text" required="required" value="" placeholder="test" />
    <button type="submit" name="save">Save</button>
    <button type="submit" name="delete">Delete</button>
</form>

JavaScript

//wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts
//ensures jQuery is the only thing declared as $
(function($){
    var isValid = null;
    var form = $('form');
    var submitButton = form.find('button[type="submit"]')
    var saveButton = submitButton.filter('[name="save"]');
    var deleteButton = submitButton.filter('[name="delete"]');

    //submit form behavior
    var submitForm = function(e){
        console.log('form submit');
        //prevent form from submitting valid or invalid
        e.preventDefault();
        //user clicked and the form was not valid
        if(isValid === false){
            isValid = null;
            return false;
        }
        //user pressed enter, process as if they clicked save instead
        saveButton.trigger('click');
    };

    //override submit button behavior
    var submitClick = function(e){
        //Test form validitiy (HTML5) and store it in a global variable so both functions can use it
        isValid = form[0].checkValidity();
        if(false === isValid){
            //allow the browser's default submit event behavior 
            return true;
        }
        //prevent default behavior
        e.preventDefault();
        //additional processing - $.ajax() etc
        //.........
        alert('Success');
    };

    //override submit form event
    form.submit(submitForm);

    //override submit button click event
    submitButton.click(submitClick);
})(jQuery);

La mise en garde à l'aide de Javascript, c'est que le navigateur par défaut de onclick doit se propager jusqu'à la soumission de l'événement DOIT se produire afin d'afficher les messages d'erreur sans l'appui de chaque navigateur dans votre code. Sinon, si l'événement click est remplacée par de l'événement.preventDefault() ou return false il ne sera jamais à se propager vers le navigateur de l'événement submit.

La chose à noter est que dans certains navigateurs ne se déclenche pas à la soumettre le formulaire lorsque l'utilisateur appuie sur entrée, à la place il va déclencher le premier bouton de soumission du formulaire. Il y a donc une console.log ("formulaire de soumission") pour montrer qu'il ne déclenche pas.