web-dev-qa-db-fra.com

Comment afficher un message/une info-bulle setCustomValidity sans l'événement submit

J'utilise la validation de base des formulaires pour vérifier si le format du courrier électronique est correct. Les données sont ensuite envoyées par Ajax. Il vérifie si l'adresse électronique est déjà utilisée et l'utilisateur a-t-il sélectionné le pays/l'état ou les valeurs par défaut laissées dans les cases à cocher. 

Mais pour que la validation de formulaire HTML5 soit effectuée, il est nécessaire de soumettre l'événement. Si vous cliquez sur ce bouton si l'opération réussit, l'opération Ajax de validation de formulaire de base est effectuée, mais lorsque les résultats vous parviendront, j'aimerais utiliser les mêmes info-bulles du navigateur pour la cohérence de l'interface (et comme à quoi ils ressemblent).

Donc, y a-t-il un moyen de les faire apparaître, je n’étais pas en mesure de savoir s’il ya un événement spécial pour eux ou quelque chose comme un événement de tir déclenché mais tout de suite arrêté. Pour l’instant, le champ n’obtient qu’un bord rouge et le message d’erreur apparaît lorsque vous survolez la souris dessus, tandis que l’info-bulle apparaît lorsque vous cliquez à nouveau sur le bouton Envoyer.

Aussi, pour les navigateurs qui n'ont pas d'infobulles natives (dans mon cas Safari), j'utilise Webshims Lib et cela fonctionne exactement de la même manière que dans Chrome et Firefox.

javascriptformshtml5validationtooltip
20
Alexxandar

Je pensais que .checkValidity() ferait l'affaire, mais cela ne déclenche pas l'interface utilisateur.

On dirait que .reportValidity() va faire ce que vous voulez. http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#dom-cva-reportvalidity

Je ne sais pas si des navigateurs l'implémentent encore: /

31
Ben Boyle

Vous pouvez trouver une réponse sur ce lien: Comment forcer une validation de formulaire html5 sans le soumettre via jQuery

En gros, vous trouvez un bouton d'envoi et appelez-le, cliquez dessus:

// force form validation
document.getElementById("submitbutton").click()

Vous pouvez également modifier le message de validation après avoir vérifié si l'adresse e-mail est utilisée ou non, puis forcer la validation du formulaire comme ci-dessus:

document.getElementById("email").setCustomValidity("This email is already registered!");
document.getElementById("submitbutton").click()
9
oldbam

C'est en fait très simple - ajoutez un élément d'entrée caché à votre formulaire:

<input type="hidden" id="myFormCheck" required="true" value=""/>

Appelez myInputField.setCustomValidity(message) sur l'élément d'entrée pour lequel vous souhaitez créer une info-bulle personnalisée puis appelez votre form.click();

Le processus de validité du formulaire s'exécute et affiche le message contextuel sur cet élément, mais le formulaire ne sera pas soumis à cause de l'élément masqué. Vous n'aurez donc pas besoin de capturer et d'annuler l'événement submit.

Lorsque vous avez terminé et que vous êtes vraiment prêt, définissez une valeur sur l'élément masqué et le formulaire sera envoyé normalement.

De cette façon, vous pouvez utiliser l'info-bulle de formulaire pour, par exemple, vérifier les noms d'utilisateur disponibles ou faire correspondre toute valeur à une requête HTTP, etc.

4
Neil

Un polyfill pour HTMLFormElement.reportValidity().
Testé avec IE11 et Edge. Mais lors de l'exécution dans le sandbox StackOverflow ci-dessous avec IE11, les messages de validation ne sont pas affichés.

function reportValidityPolyfill() {
  const button = createInvisibleSubmitButton();
  this.appendChild(button);
  this.addEventListener("submit", submitEventHandler);
  var isValid = false;
  button.click();
  this.removeEventListener("submit", submitEventHandler);
  this.removeChild(button);
  return isValid;

  function createInvisibleSubmitButton() {
    const button = document.createElement("button");
    button.type = "submit";
    button.style.display = "none";
    return button;
  }

  function submitEventHandler(event) {
    event.preventDefault();
    isValid = true;
  }
}

if (!HTMLFormElement.prototype.reportValidity) {
  HTMLFormElement.prototype.reportValidity = reportValidityPolyfill;
  console.log("ReportValidity polyfill installed.");
} else {
  console.log("ReportValidity polyfill skipped.");
}
input {
  outline: 1px solid #0f0;
}

input:invalid {
  outline: 1px solid #f00;
}
<form id="form1">
  Enter a number from 1 to 5: <input type="number" min="1" max="5" required>
</form>
<br>
<div onclick="console.log('Validity: ' + document.getElementById('form1').reportValidity())">
  Click here to call reportValidity()
</div>

2
Christian d'Heureuse

Commander ce lien ( Fournissez des messages de validation personnalisés à l'aide de setCustomValidity in HTML 5 pages ).

Dans le lien ci-dessus, il a utilisé le type "input", numéro et en entrée, il a appelé la fonction de validation. Faites-moi savoir est ce que vous recherchez. 

<input type="number" required="true" value="50" min="18" max="60" step="1" oninput="validate(this)">
1
thomasbabuj

Comme la plupart des gens disent que vous devez utiliser input.setCustomValidity("message").

Le problème ici est que vous ne pouvez pas vérifier cette validation dans l'événement submit, car vous devez effectuer un appel ajax puis définir setCustomValidity de manière asynchrone.

Vous devez donc utiliser l’événement change du champ de saisie et effectuer l’appel ajax à chaque modification. Ou supprimez le bouton d'envoi et utilisez l'événement click d'un bouton normal, vérifiez l'adresse électronique unique dans l'appel ajax, puis appelez envoi via javascript.

Voir un exemple de la dernière option utilisant jQuery:

<form action="/sign-in" id="form">
    <input type="email" id="email" required/>
    <button id="submit">Submit</button>
</form>

// we capture the click instead the submit
$("#submit").on("click",function(){
    var $elem = $("#email");
    var email = $elem.val();

    //the ajax call returns true if the email exists
    $.get( "ajax/checkUniqueEmail", function(data) {
        if(data === "true"){
            $elem.setCustomValidity("This email already exists.");
        }else{
            $elem.setCustomValidity("")
        }
        //then we submit the form
        $("#form").submit();
    });
});
1
Ma Jerez

Voici un bel exemple live que la coutume valide/donne un retour sur une entrée de formulaire.

Le javascript de base ressemble à:

function checkPasscode() {
    var passcode_input = document.querySelector("#passcode");

    if (passcode_input.value != "Ivy") {
        passcode_input.setCustomValidity("Wrong. It's 'Ivy'.");
    } else {
        passcode_input.setCustomValidity(""); // be sure to leave this empty!
        alert("Correct!");
    }
}

HTML:

<form>
    <label for="passcode">Enter Passcode:</label>
    <input id="passcode" 
           type="password" 
           placeholder="Your passcode" 
           oninput="checkPasscode();"
           required/>
    <button type="submit">Submit</button>
</form>
0
zelusp

Vous pouvez utiliser setCustomValidity avec pour l'élément si la condition est fausse (vous pouvez le faire dans n'importe quel gestionnaire d'événements, tel que la frappe ou le clic). Si l'entrée n'est pas valide, soumettez. Cela déclenchera l'info-bulle du navigateur.

0
Ivan Ivković