HTML5-Formular-Attribut erforderlich. Benutzerdefinierte Validierungsmeldung festlegen?

Question

Ich habe das folgende HTML5-Formular: 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"/>

Wenn ich derzeit die Eingabetaste drücke und beide Felder leer sind, erscheint ein Popup-Fenster mit der Meldung "Bitte füllen Sie dieses Feld aus". Wie kann ich diese Standardmeldung in "Dieses Feld kann nicht leer gelassen werden" ändern?

EDITAR: Beachten Sie auch, dass die Fehlermeldung für das Feld type password einfach lautet ***** . Um dies neu zu erstellen, geben Sie dem Benutzernamen einen Wert und klicken Sie auf Senden.

EDITAR : Ich verwende Chrome 10 zum Testen. Bitte tun Sie das Gleiche

Answer 1

Ich habe eine einfachere Lösung nur mit Vanilla Js:

Für Kontrollkästchen:

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

Für Eingaben:

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

Answer 2

Wenn Sie nur eine einzige Fehlermeldung erhalten, versuchen Sie es unten.

<input oninvalid="this.setCustomValidity('my error message')"
       oninput="this.setCustomValidity('')">  <!--  don't forget it. -->

Um mehrere Fehler zu behandeln, versuchen Sie Folgendes

<input oninput="this.setCustomValidity('')">
<script>
inputElem.addEventListener("invalid", ()=>{
    if (inputElem.validity.patternMismatch) {
      return inputElem.setCustomValidity('my error message')
    }
    return inputElem.setCustomValidity('') // default message
})
</script>

Beispiel

Sie können valueMissing und valueMissing testen.

<form>
<input pattern="[^\\/:\x22*?<>|]+"
       placeholder="input file name"       
       oninput="this.setCustomValidity('')"
       required
>
  <input type="submit">
</form>

<script>
  const form = document.querySelector("form")

  const inputElem = document.querySelector(`input`)

  inputElem.addEventListener("invalid", ()=>{   
    if (inputElem.validity.patternMismatch) {
      return inputElem.setCustomValidity('Illegal Filename Characters \\/:\x22?<>|')
    }
    return inputElem.setCustomValidity('') // return default message according inputElem.validity.{badInput, customError, tooLong, valueMissing ...}
  })

  form.onsubmit = () => {
    return false
  }
</script>

• ValidityState

Answer 3

Okay, oninvalid funktioniert gut, aber es zeigt Fehler, auch wenn Benutzer gültige Daten eingegeben. Also habe ich unten verwendet, um es anzugehen, hoffen, dass es auch für Sie funktionieren wird,

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

Answer 4

Anpassen Salar Antwort auf JSX und React, ist mir aufgefallen, dass sich React Select nicht wie eine <input/> Feld für die Validierung. Offenbar sind mehrere Umgehungslösungen erforderlich, um nur die benutzerdefinierte Meldung anzuzeigen und zu verhindern, dass sie zu ungünstigen Zeiten angezeigt wird.

Ich habe ein Problem angesprochen aquí falls das etwas hilft. Hier ist eine CodeSandbox mit einem funktionierenden Beispiel, und der wichtigste Code dort ist hier wiedergegeben:

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

Answer 5

const username= document.querySelector('#username');
const submit=document.querySelector('#submit');

submit.addEventListener('click',()=>{
    if(username.validity.typeMismatch){
        username.setCustomValidity('Please enter User Name');
    }else{
        username.setCustomValidity('');
    }
if(pass.validity.typeMismatch){
        pass.setCustomValidity('Please enter Password');
    }else{
        pass.setCustomValidity('');
    }

})