HTML5 attribut requis du formulaire. Définir un message de validation personnalisé?

j'ai le formulaire HTML5 suivant: http://jsfiddle.net/nfgfP /

html lang-html prettyprint-override"><form id="form" onsubmit="return(login())">
<input name="username" placeholder="Username" required />
<input name="pass"  type="password" placeholder="Password" required/>
<br/>Remember me: <input type="checkbox" name="remember" value="true" /><br/>
<input type="submit" name="submit" value="Log In"/>

actuellement, lorsque je clique sur enter alors qu'ils sont tous les deux Vierges, une fenêtre popup apparaît disant "please fill out this field". Comment changer ce message par défaut en "ce champ ne peut pas être laissé en blanc"?

modifier: noter aussi que le message d'erreur du champ de mot de passe de type est simplement ***** . Pour recréer ceci donnez à l'utilisateur un nom de valeur et appuyez sur soumettre.

EDIT : J'utilise Chrome 10 pour les tests. Merci de faire de même

236
demandé sur Damjan Pavlica 2011-03-11 14:40:29

13 réponses

Utilisation setCustomValidity :

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("This field cannot be left blank");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

I changé en JavaScript vanille de Mootools comme suggéré par @itpastorn dans les commentaires, mais vous devriez être en mesure de travailler sur les Mootools équivalent si nécessaire.

Modifier

j'ai mis à jour le code ici comme setCustomValidity fonctionne un peu différemment de ce que j'ai compris quand j'ai répondu à l'origine. Si setCustomValidity est défini à quelque chose d'autre que la chaîne vide, il fera que le champ sera considéré comme invalide; par conséquent, vous devez l'effacer avant de tester la validité, vous ne pouvez pas simplement le définir et oublier.

modifier

comme indiqué dans le commentaire de @thomasvdb ci-dessous, vous devez effacer la validité personnalisée dans certains cas en dehors de invalid sinon il peut y avoir un passage supplémentaire par le handler oninvalid pour l'effacer.

211
répondu robertc 2017-07-18 02:09:28

voici le code pour gérer le Message D'erreur personnalisé dans HTML5

<input type="text" id="username" required placeholder="Enter Name"
    oninvalid="this.setCustomValidity('Enter User Name Here')"
    oninput="this.setCustomValidity('')"  />

cette partie est importante car elle cache le message d'erreur lorsque l'utilisateur entre de nouvelles données:

    oninput="this.setCustomValidity('')"
167
répondu Somnath Kadam 2018-09-10 12:02:49

il est très simple de contrôler les messages personnalisés à l'aide de HTML5 événement oninvalid

voici le code:

<input id="UserID"  type="text" required="required"
       oninvalid="this.setCustomValidity('Witinnovation')"
       onvalid="this.setCustomValidity('')">

C'est le plus important:

onvalid="this.setCustomValidity('')"
85
répondu Ashwini Jain 2018-03-07 08:06:33

Note: cela ne fonctionne plus dans Chrome, pas testé dans d'autres navigateurs. Voir les modifications ci-dessous. Cette réponse est laissée ici pour référence historique.

si vous pensez que la chaîne de validation ne devrait pas être définie par le code, vous pouvez définir l'attribut title de l'élément d'entrée pour lire"ce champ ne peut pas être laissé en blanc". (Fonctionne dans Chrome 10)

title="This field should not be left blank."

voir http://jsfiddle.net/kaleb/nfgfP/8/

et dans Firefox, vous pouvez ajouter cet attribut:

x-moz-errormessage="This field should not be left blank."

Modifier

cela semble avoir changé depuis que j'ai écrit cette réponse à l'origine. Maintenant l'ajout d'un titre ne change pas le message de validité, il ajoute simplement un addendum au message. Le violon ci-dessus s'applique toujours.

Edit 2

Chrome ne fait plus rien avec L'attribut title à partir de Chrome 51. Je ne suis pas sûr dans quelle version cela a changé.

62
répondu kzh 2016-07-16 10:57:14

j'ai fait une petite bibliothèque pour faciliter la modification et traduction des messages d'erreur. Vous pouvez même modifier les textes par type d'erreur qui n'est actuellement pas disponible en utilisant title dans Chrome ou x-moz-errormessage dans Firefox. Aller vérifier sur GitHub , et donner des commentaires.

c'est utilisé comme:

<input type="email" required data-errormessage-value-missing="Please input something">

il y a une démo disponible à jsFiddle .

34
répondu hleinone 2012-04-02 13:08:37

il est très simple de contrôler les messages personnalisés à l'aide du HTML5 oninvalid événement

voici le code:

User ID 
<input id="UserID"  type="text" required 
       oninvalid="this.setCustomValidity('User ID is a must')">
33
répondu Dharmendra Jha 2014-10-13 20:10:33

en réglant et en désactivant le setCustomValidity au bon moment, le message de validation fonctionnera parfaitement.

<input name="Username" required 
oninvalid="this.setCustomValidity('Username cannot be empty.')" 
onchange="this.setCustomValidity('')" type="text" />

j'ai utilisé onchange au lieu de oninput ce qui est plus général et se produit quand la valeur est changée dans n'importe quelle condition même par JavaScript.

30
répondu Salar 2015-11-29 06:14:18

essayez celui-ci, il est mieux et testé:

HTML:

<form id="myform">
    <input id="email" 
           oninvalid="InvalidMsg(this);" 
           oninput="InvalidMsg(this);"
           name="email"  
           type="email" 
           required="required" />
    <input type="submit" />
</form>

JAVASCRIPT:

function InvalidMsg(textbox) {
    if (textbox.value === '') {
        textbox.setCustomValidity('Required email address');
    } else if (textbox.validity.typeMismatch){
        textbox.setCustomValidity('please enter a valid email address');
    } else {
       textbox.setCustomValidity('');
    }

    return true;
}

Démo:

http://jsfiddle.net/patelriki13/Sqq8e /

14
répondu Rikin Patel 2018-09-11 14:51:30

il s'agit d'un message très simple de contrôle du type D'entrée HTML requis. Pas besoin JS, ou CSS utilisez uniquement HTML5.

tout D'abord, vous pouvez utiliser cet attribut seulement" oninvalid

<input id="userid" type="text or others" required="" oninvalid="this.setCustomValidity('Hello Username cant be Blank!')">

ou vous pouvez utiliser avec "Oninput" attribut

<input id="userid" type="text or others" required="" oninvalid="this.setCustomValidity('Hello Username cant be Blank!')" oninput="setCustomValidity('')">
10
répondu Obaidul Haque 2017-07-05 21:31:36

la façon la plus facile et la plus propre que j'ai trouvé est d'utiliser un attribut de données pour stocker votre erreur personnalisée. Tester la validité du noeud et gérer l'erreur en utilisant du html personnalisé. enter image description here

le javascript

if(node.validity.patternMismatch)
        {
            message = node.dataset.patternError;
        }

et certains super HTML5

<input type="text" id="city" name="city" data-pattern-error="Please use only letters for your city." pattern="[A-z ']*" required>
9
répondu Collin White 2013-04-17 19:19:49

j'ai une solution plus simple de vanille js seulement:

pour les cases à cocher:

document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.checked ? '' : 'My message');
};

pour les entrées:

document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.value ? '' : 'My message');
};
1
répondu bernhardh 2016-08-18 12:57:44

adaptation Salar ' S réponse à JSX et React, j'ai remarqué que React Select ne se comporte pas comme un champ <input/> en ce qui concerne la validation. Apparemment, plusieurs solutions de rechange sont nécessaires pour montrer seulement le message personnalisé et de l'empêcher de montrer aux moments difficiles.

j'ai soulevé une question ici , si ça peut vous aider. ici est un CodeSandbox avec un exemple de travail, et le plus Code important il est reproduit ici:

Bonjour.js

import React, { Component } from "react";
import SelectValid from "./SelectValid";

export default class Hello extends Component {
  render() {
    return (
      <form>
        <SelectValid placeholder="this one is optional" />
        <SelectValid placeholder="this one is required" required />
        <input
          required
          defaultValue="foo"
          onChange={e => e.target.setCustomValidity("")}
          onInvalid={e => e.target.setCustomValidity("foo")}
        />
        <button>button</button>
      </form>
    );
  }
}

SelectValid.js

import React, { Component } from "react";
import Select from "react-select";
import "react-select/dist/react-select.css";

export default class SelectValid extends Component {
  render() {
    this.required = !this.props.required
      ? false
      : this.state && this.state.value ? false : true;
    let inputProps = undefined;
    let onInputChange = undefined;
    if (this.props.required) {
      inputProps = {
        onInvalid: e => e.target.setCustomValidity(this.required ? "foo" : "")
      };
      onInputChange = value => {
        this.selectComponent.input.input.setCustomValidity(
          value
            ? ""
            : this.required
              ? "foo"
              : this.selectComponent.props.value ? "" : "foo"
        );
        return value;
      };
    }
    return (
      <Select
        onChange={value => {
          this.required = !this.props.required ? false : value ? false : true;
          let state = this && this.state ? this.state : { value: null };
          state.value = value;
          this.setState(state);
          if (this.props.onChange) {
            this.props.onChange();
          }
        }}
        value={this && this.state ? this.state.value : null}
        options={[{ label: "yes", value: 1 }, { label: "no", value: 0 }]}
        placeholder={this.props.placeholder}
        required={this.required}
        clearable
        searchable
        inputProps={inputProps}
        ref={input => (this.selectComponent = input)}
        onInputChange={onInputChange}
      />
    );
  }
}
0
répondu GuiRitter 2018-05-24 14:23:37

OK, oninvalid fonctionne bien mais il montre l'erreur même si l'Utilisateur a entré des données valides. J'ai donc utilisé ci-dessous pour le combattre, espérons que cela fonctionnera pour vous aussi,

oninvalid="this.setCustomValidity('Your custom message.')" onkeyup="setCustomValidity('')"

0
répondu Umesh Patil 2018-08-28 11:14:43