web-dev-qa-db-fra.com

Comment puis-je vérifier la validité d'un formulaire HTML5 qui ne contient pas de bouton d'envoi?

J'ai l'exemple de code suivant qui fonctionne dans les navigateurs qui vérifient lorsqu'ils voient le HTML5 "requis" sur une entrée comme l'e-mail ici:

<form id='myForm'>
    <div>
    <label>Email:
      <input name=email type=email required title="enter your email">
    </label>
    <input type=submit>
    </div>
</form>​

Voici un violon pour ce qui précède.

Cependant, dans mon application, j'utilise un bouton en dehors de mon formulaire et le code suivant attaché à l'événement click de ce bouton:

if (!$form.valid || $form.valid()) {
    $submitBt
        .disableBt();
    $modal
        .removeBlockMessages()
        .blockMessage('Contacting Server, please wait ... ', {
            type: 'loading'
        });
    $.ajax({
        url: href,
        dataType: 'json',
        type: 'POST',
        data: $form.serializeArray()
    })
        .done(onDone)
        .fail(onFail);
}

J'ai deux questions ici:

  • À quoi sert le code suivant: (! $ Form.valid || $ form.valid ())
  • Comment puis-je vérifier la validité de mon formulaire en utilisant les nouveaux contrôles HTML5?
javascriptjqueryhtml5validation
26
user1464139

En supposant que vous avez défini l'élément de formulaire sur un objet appelé $form, Alors if (!$form.valid || $form.valid()) est une syntaxe intelligente qui signifie "si $form N'a pas de méthode appelée valid, ou si valid() renvoie true ". En règle générale, vous aurez installé et initialisé le plug-in de validation jQuery d'ici là, mais cela empêche le formulaire de devenir désactivé si le plug-in de validation n'est pas chargé.

Vous pouvez faire un test similaire en utilisant la méthode HTML5 checkValidity, ressemblant à ceci:

if (!$form.checkValidity || $form.checkValidity()) {
  /* submit the form */
}

[~ # ~] éditez [~ # ~] : checkValidity est ne fonction de la spécification des formulaires HTML5 . En février 2016, CanIUse.com rapporte que plus de 95% des navigateurs le prennent en charge .

53
Jeff Bowman

En HTML5, vous pouvez utiliser un attribut "formulaire" sur un élément pour l'associer explicitement à un élément Form indépendamment de l'endroit où il est positionné dans la structure de la page: http://developers.whatwg.org/association-of -controls-and-forms.html # attr-fae-form

Dans les navigateurs compatibles, vous devriez pouvoir placer votre élément d'entrée [type = soumettre] [formulaire = id] n'importe où et le faire déclencher correctement le processus de validation et de soumission.

J'ai tendance à mettre du code qui est censé intercepter le processus de soumission dans le gestionnaire d'événements "submit" du formulaire, de cette façon, il est déclenché par les utilisateurs appuyant sur la touche Entrée ainsi que sur les boutons d'entrée [type = submit] que j'ai.

1
jokeyrhyme