web-dev-qa-db-fra.com

Validation HTML5 lorsque le type d'entrée n'est pas "submit"

J'utilise HTML5 pour valider les champs. Je soumets le formulaire en utilisant JavaScript sur un clic de bouton. Mais la validation HTML5 ne fonctionne pas. Cela ne fonctionne que si le type d'entrée est submit . Pouvons-nous faire autre chose que d’utiliser la validation JavaScript ou de changer le type en submit?

C'est le code HTML:

<input type="text" id="example" name="example" value="" required>
<button type="button"  onclick="submitform()" id="save">Save</button>

Je soumets le formulaire dans la fonction submitform().

htmlhtml5formsvalidationhtml5-validation
58
I'm nidhin

Le processus de validation de formulaire HTML5 est limité aux situations dans lesquelles le formulaire est soumis via un bouton d'envoi. Le algorithme de soumission de formulaire indique explicitement que la validation n'est pas effectuée lorsque le formulaire est soumis via la méthode submit(). Apparemment, l'idée est que si vous soumettez un formulaire via JavaScript, vous êtes supposé faire une validation.

Cependant, vous pouvez demander une validation de formulaire (statique) par rapport aux contraintes définies par les attributs HTML5, à l'aide de la méthode checkValidity(). Si vous souhaitez afficher les mêmes messages d'erreur que le navigateur lors de la validation de formulaire HTML5, je crains que vous n’ayez besoin de vérifier tous les champs contraints, car la propriété validityMessage est une propriété de ), pas la forme. Dans le cas d'un seul champ contraint, comme dans le cas présenté, ceci est évidemment trivial:

function submitform() {
  var f = document.getElementsByTagName('form')[0];
  if(f.checkValidity()) {
    f.submit();
  } else {
    alert(document.getElementById('example').validationMessage);
  }
}
78
Jukka K. Korpela

Je suis peut-être en retard, mais je l’ai fait en créant une entrée de soumission masquée et en appelant le gestionnaire de clics lors de la soumission. Quelque chose comme (en utilisant jquery pour plus de simplicité):

<input type="text" id="example" name="example" value="" required>
<button type="button"  onclick="submitform()" id="save">Save</button>
<input id="submit_handle" type="submit" style="display: none">

<script>
function submitform() {
    $('#submit_handle').click();
}
</script>
13
Bekodo

Vous devriez utiliser une balise de formulaire contenant vos entrées. Et le type d'entrée submit.
Cela marche.

<form id="testform">
<input type="text" id="example" name="example"  required>
<button type="submit"  onclick="submitform()" id="save">Save</button>
</form>

Étant donné que la validation HTML5 ne fonctionne qu'avec le bouton d'envoi, vous devez la conserver. Vous pouvez toutefois éviter la soumission du formulaire lorsqu'il est valide en empêchant l'action par défaut en écrivant le gestionnaire d'événements pour le formulaire.

document.getElementById('testform').onsubmit= function(e){
     e.preventDefault();
}

Cela donnera votre validation si elle est invalide et ne soumettra pas le formulaire s'il est valide.

8
Vishwanath

Essayez avec <button type="submit"> Vous pouvez exécuter la fonctionnalité de submitform() en faisant <form ....... onsubmit="submitform()">

5
Ahmed

Soit vous pouvez changer le type de bouton en submit

<button type="submit"  onclick="submitform()" id="save">Save</button>

Ou vous pouvez masquer le bouton d'envoi, conserver un autre bouton avec type = "bouton" et cliquer sur l'événement pour ce bouton

<form>
    <button style="display: none;" type="submit" >Hidden button</button>
    <button type="button" onclick="submitForm()">Submit</button>
</form>
4
Jackson Abraham

Je voulais ajouter une nouvelle façon de faire que j'ai récemment rencontrée. Même si la validation de formulaire ne s'exécute pas lorsque vous soumettez le formulaire à l'aide de la méthode submit(), rien ne vous empêche de cliquer sur un bouton d'envoi par programme. Même si c'est caché.

Avoir un formulaire:

<form>
    <input type="text" name="title" required />
    <button style="display: none;" type="submit" id="submit-button">Not Shown</button>
    <button type="button" onclick="doFancyStuff()">Submit</button>
</form>

Cela déclenchera la validation du formulaire:

function doFancyStuff() {
    $("#submit-button").click();
}

Ou sans jQuery

function doFancyStuff() {
    document.getElementById("submit-button").click();
}

Dans mon cas, je fais une série de validations et de calculs lorsque le bouton de soumission simulé est activé. Si ma validation manuelle échoue, je sais que je peux par programme cliquer sur le bouton de soumission masqué pour afficher la validation du formulaire.

Voici un JSfiddle TRES simple montrant le concept:

https://jsfiddle.net/45vxjz87/1/

4
Blunderfest

Validation HTML5 fonctionne uniquement lorsque le type de bouton sera soumis

changement --

<button type="button"  onclick="submitform()" id="save">Save</button>

À --

<button type="submit"  onclick="submitform()" id="save">Save</button>
3
Sorav Garg

Essayez ceci:

<script type="text/javascript">
    function test
    {
        alert("hello world");  //write your logic here like ajax
    }
</script>

<form action="javascript:test();" >
    firstName : <input type="text" name="firstName" id="firstName" required/><br/>
    lastName : <input type="text" name="lastName" id="lastName" required/><br/>
    email : <input type="email" name="email" id="email"/><br/>
    <input type="submit" value="Get It!" name="submit" id="submit"/>
</form>
2
Sumeet Patil

Mise à jour 2019: il est désormais plus facile de signaler les erreurs de validation qu'au moment de la réponse acceptée grâce à l'utilisation de HTMLFormElement.reportValidity () qui vérifie non seulement la validité, comme checkValidity(), mais également des rapports. erreurs de validation à l'utilisateur.

La méthode HTMLFormElement.reportValidity () renvoie true si les contrôles enfants de l'élément répondent à leurs contraintes de validation. Lorsque la valeur false est renvoyée, les événements invalides annulables sont déclenchés pour chaque enfant non valide et les problèmes de validation sont signalés à l'utilisateur.

Extrait de solution mis à jour:

function submitform() {
  var f = document.getElementsByTagName('form')[0];
  if(f.reportValidity()) {
    f.submit();
  }
}
0
Laurent