web-dev-qa-db-fra.com

Comment changer le message par défaut du champ requis dans le popover de form-control dans bootstrap?

 <form class="form-asd" role="form">
    <h2 class="form-signin-heading">login</h2><hr />
    <label class="control-label"  for="username">Username</label>
    <input class="form-control" type="email"  required="" placeholder="username"data-error="enter valid username"></input>
    <label class="control-label"  for="username">password</label>
    <input class="form-control" type="password"  required=" " placeholder="Password"></input>
    <label class="checkbox"></label>
    <button class="btn btn-lg btn-primary " type="submit">submit</button>
</form>

comment pouvons-nous changer ce message par défaut de popover du champ requis "Veuillez remplir ce champ" en "veuillez saisir un nom d'utilisateur"

html5css3twitter-bootstrap
45
dpndra

Vous pouvez utiliser la fonction setCustomValidity lorsque l'événement oninvalid se produit.

Comme ci-dessous: -

<input class="form-control" type="email" required="" 
    placeholder="username" oninvalid="this.setCustomValidity('Please Enter valid email')">
</input>

Mettre à jour:-

Pour effacer le message une fois que vous avez commencé à entrer, utilisez l'attribut oninput="setCustomValidity('') pour effacer le message.

<input class="form-control" type="email"  required="" placeholder="username"
 oninvalid="this.setCustomValidity('Please Enter valid email')"
 oninput="setCustomValidity('')"></input>
127
Mritunjay

La combinaison des réponses de Mritunjay et Bartu est une réponse complète à cette question. Je copie l'exemple complet.

<input class="form-control" type="email"  required="" placeholder="username"
 oninvalid="this.setCustomValidity('Please Enter valid email')"
 oninput="setCustomValidity('')"></input>

Ici,

this.setCustomValidity ('Veuillez saisir un e-mail valide') "- Afficher le message personnalisé lors de l'invalidation du champ

oninput = "setCustomValidity ('')" - Supprime le message d'invalidation du fichier validé.

17
Sairam Kukadala

Et pour toutes les entrées et sélectionnez:

$("input[required], select[required]").attr("oninvalid", "this.setCustomValidity('Required!')");
$("input[required], select[required]").attr("oninput", "setCustomValidity('')");
0
Stepan Tripal

$ ("input [requis]"). attr ("oninvalid", "this.setCustomValidity ('Say Somthing!')");

ce travail si vous passez au champ précédent ou suivant avec la souris, mais en appuyant sur la touche Entrée, ce n’est pas du travail !!!

0
APH