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

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

<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 Entrée alors qu'ils sont tous deux vides, une boîte de dialogue apparaît indiquant "Veuillez remplir ce champ". Comment changer ce message par défaut en "Ce champ ne peut pas être laissé vide"?

EDIT: Notez également que le message d'erreur du champ de mot de passe de type est simplement *****. Pour recréer cela, donnez une valeur au nom d'utilisateur et cliquez sur soumettre.

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

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("");
        };
    }
})

J'ai changé pour vanilla JavaScript de Mootools comme suggéré par @itpastorn dans les commentaires, mais vous devriez être en mesure de trouver l'équivalent de Mootools si nécessaire.

Éditer

J'ai mis à jour le code ici car il setCustomValidityfonctionne légèrement différemment de ce que j'ai compris lorsque j'ai répondu à l'origine. Si setCustomValidityest défini sur autre chose que la chaîne vide, le champ sera considéré comme non valide; par conséquent, vous devez l'effacer avant de tester la validité, vous ne pouvez pas simplement le définir et l'oublier.

Modifier davantage

Comme indiqué dans le commentaire de @ thomasvdb ci-dessous, vous devez effacer la validité personnalisée dans certains cas en dehors invalidsinon il peut y avoir un passage supplémentaire via le oninvalidgestionnaire pour l'effacer.

Voici le code pour gérer les messages d'erreur personnalisés en 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 masque le message d'erreur lorsque l'utilisateur entre de nouvelles données:

oninput="this.setCustomValidity('')"

Il est très simple de contrôler les messages personnalisés à l'aide de l' HTML5événementoninvalid

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('')"

Remarque: cela ne fonctionne plus dans Chrome, non 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 doit vraiment pas être définie par du code, vous pouvez définir l'attribut title de l'élément d'entrée pour lire "Ce champ ne peut pas être laissé vide". (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."

Éditer

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

Modifier 2

Chrome ne fait plus rien avec l'attribut title à partir de Chrome 51. Je ne sais pas dans quelle version cela a changé.

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

Voici le code:

User ID 
<input id="UserID"  type="text" required 
       oninvalid="this.setCustomValidity('User ID is a must')">

En définissant et en désélectionnant le setCustomValidityau 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é onchangeau lieu de oninputce qui est plus général et se produit lorsque la valeur est modifiée dans n'importe quelle condition, même via JavaScript.

J'ai créé une petite bibliothèque pour faciliter la modification et la traduction des messages d'erreur. Vous pouvez même modifier les textes par type d'erreur qui n'est actuellement pas disponible à l'aide titlede Chrome ou x-moz-errormessagede Firefox. Allez le vérifier sur GitHub et donnez votre avis.

Il est utilisé comme:

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

Il y a une démo disponible sur jsFiddle .

Essayez celui-ci, son meilleur 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/

Le moyen le plus simple et le plus propre que j'ai trouvé consiste à utiliser un attribut de données pour stocker votre erreur personnalisée. Testez la validité du nœud et gérez l'erreur en utilisant du code HTML personnalisé.

le javascript

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

et du super HTML5

<input type="text" id="city" name="city" data-pattern-error="Please use only letters for your city." pattern="[A-z ']*" required>

La solution pour éviter les messages d'erreur Google Chrome lors de la saisie de chaque symbole:

<p>Click the 'Submit' button with empty input field and you will see the custom error message. Then put "-" sign in the same input field.</p>
<form method="post" action="#">
  <label for="text_number_1">Here you will see browser's error validation message on input:</label><br>
  <input id="test_number_1" type="number" min="0" required="true"
         oninput="this.setCustomValidity('')"
         oninvalid="this.setCustomValidity('This is my custom message.')"/>
  <input type="submit"/>
</form>

<form method="post" action="#">
  <p></p>
  <label for="text_number_1">Here you will see no error messages on input:</label><br>
  <input id="test_number_2" type="number" min="0" required="true"
         oninput="(function(e){e.setCustomValidity(''); return !e.validity.valid && e.setCustomValidity(' ')})(this)"
         oninvalid="this.setCustomValidity('This is my custom message.')"/>
  <input type="submit"/>
</form>

J'ai une seule solution simple vanille js:

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');
};

En adaptant la réponse de Salar à JSX et React, j'ai remarqué que React Select ne se comportait pas comme un <input/>champ concernant la validation. Apparemment, plusieurs solutions de contournement sont nécessaires pour afficher uniquement le message personnalisé et l'empêcher de s'afficher à des moments incommodes.

J'ai soulevé un problème ici , si cela peut aider quelque chose. Voici un CodeSandbox avec un exemple de travail, et le code le plus important y est reproduit ici:

Hello.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}
      />
    );
  }
}

D'accord, oninvalid fonctionne bien mais il affiche une erreur même si l'utilisateur a entré des données valides. J'ai donc utilisé ci-dessous pour y faire face, j'espère que cela fonctionnera aussi pour vous,

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

Peut être facilement géré en mettant simplement 'title' dans le champ:

<input type="text" id="username" required title="This field can not be empty"  />