Js - HTML validation form

nova
Javascript

Bonjour,

J'aimerais en js valider un form, j'ai trouver la méthode suivante :

document.getElementById("id-form").checkValidity() ;

Qui me renvoie un boolean et check bien si mon formulaire est bon ou non.

J'ai regardé sur le site suivant :
https://dmouronval.developpez.com/tutoriels/javascript/api-contrainte-validation/#LIII-A
dans la partie "Qu'est-ce que la contrainte de validation ?" je voudrais avoir les bulles par defaut en cas de formulaire non valide.

Pour rappel les bulles en question s'affiche en cas de submit par un button dans le form mais ce que je veux c'est vérifier le form par js sans le submit.

Merci pour vos retours.

6 réponses

Lartak
Réponse acceptée

C'est la validation HTML, soit la validation faite nativement par les navigateurs, pour celà il faut par exemple définir l'attribut required sur l'élément du formulaire, et/ou un des attributs selon le type de champ (min, max, minlength, maxlength, pattern, etc..), tout ça c'est le navigateur qui peut le gérer, tout comme l'orsque tu définis un champ de type email, le navigateur va faire une prévalidation, de manière à ce que la saisie soit un minimum correcte.
Tu pourras en trouver une bonne partie et une explication ici : Utiliser la validation intégrée au formulaire.

nova
Auteur
Réponse acceptée

Ok merci bien, je me suis tapé un peu de doc mais je n'ai pas trouvé de fonction à call.
Au final la seule façon que j'ai trouvé pour afficher les bulles de validation est de faire un fake submit :

// Mon Html : 
<form>
                    //des inputs 
                    <button id="submit-hidden" type="submit" style="display: none"></button>
</form

// Mon Js Event est appellé puis le code suivant est executé :
 if (!$('#form')[0].checkValidity()) {
          $("#form").find("#submit-hidden").click();
 }
Lartak

Bonjour.
Tu commences à dire :

je voudrais avoir les bulles par defaut en cas de formulaire non valide.

Mais ensuite tu dis :

ce que je veux c'est vérifier le form par js sans le submit.

Donc qu'est-ce que tu veux exactement, la validation HTML ou la validation via JS ?

nova
Auteur

Je ne sais pas exactement comment cela fonctionne mais quand on submit un form en passant par un button de type submit. Si jamais le formulaire n'est pas valide on se retrouve avec un message de ce type :
https://ibb.co/Dp3Y0Yx

Dans mon js j'ai un évènement qui est throw ce qui me permet de récup les champs. Mais si jamais les champs sont faux je veux faire en sorte que le même type de message s'affiche (sans utiliser jquery validator). J'ai essayé de simuler un submit en jquery mais il n'utilise pas la validation. 

//--- HTML Exemple
<form id="form" name="form" method="post" action="url" >
        <input type="email" id="form_email" name="form[email]" required="required" placeholder="Email" >
</form>

//--- JS Exemple
//Fake submit pour voir si cela affiche les champs non valides
$( "#form" ).submit(function( event ) {
  event.preventDefault();
});
//Suite du code
//-- j'aimerais appeller un event ou une fonction qui me permet d'afficher la validité de chaque input du form et d'y afficher les "pop-up" '
if(document.getElementById("form").checkValidity())
{
    //TO DO
}

J'espère que c'est plus clair !

Lartak

Je ne vois pas ce que je suis censé comprendre avec ton lien, car la seule chose qui s'affiche c'est un loader pendant le chargement de la page, puis rien du tout à la suite, aucun screen, aucune image.
L'image Capture-submit.png n'arrive pas à se charger d'après l'inspecteur du navigateur.

nova
Auteur

Tiens l'image en direct https://i.ibb.co/8cFb1bW/Capture-submit.png

C'est surement un truc assez simple en plus ...