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

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

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

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é.

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 .

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

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.

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 /

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

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é.

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>

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

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

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