Wymagany atrybut formularza HTML5. Ustawić niestandardowy komunikat sprawdzania poprawności?

Mam następujący formularz HTML5: 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"/>

Obecnie, gdy klikam Enter, gdy oba są puste, pojawia się wyskakujące okienko z napisem „Proszę wypełnić to pole”. Jak zmienić domyślną wiadomość na „To pole nie może być puste”?

EDYCJA: Zauważ też, że komunikat o błędzie pola hasła typu jest po prostu *****. Aby odtworzyć to, podaj nazwę użytkownika i naciśnij „Prześlij”.

EDYCJA : Używam Chrome 10 do testowania. Zrób to samo

Użyj 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 zmieniono wanilii JavaScript z Mootools jak sugeruje @itpastorn w komentarzach, ale powinieneś być w stanie wypracować Mootools równoważne, jeżeli jest to konieczne.

Edytować

Zaktualizowałem tutaj kod, ponieważ setCustomValiditydziała nieco inaczej niż zrozumiałem, kiedy pierwotnie odpowiedziałem. Jeśli setCustomValidityzostanie ustawiona wartość inna niż pusty ciąg, spowoduje to, że pole zostanie uznane za nieprawidłowe; dlatego musisz to wyczyścić przed przetestowaniem poprawności, nie możesz po prostu ustawić i zapomnieć.

Dalsza edycja

Jak wskazano w komentarzu @ thomasvdb poniżej, musisz wyczyścić niestandardową ważność w niektórych przypadkach poza, w invalidprzeciwnym razie może istnieć dodatkowe przejście przez program oninvalidobsługi, aby je wyczyścić.

Oto kod do obsługi niestandardowego komunikatu o błędzie w HTML5

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

Ta część jest ważna, ponieważ ukrywa komunikat o błędzie, gdy użytkownik wprowadza nowe dane:

oninput="this.setCustomValidity('')"

Sterowanie komunikatami niestandardowymi za pomocą HTML5zdarzenia jest bardzo prosteoninvalid

Oto kod:

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

To jest najważniejsze:

onvalid="this.setCustomValidity('')"

Uwaga: to nie działa już w Chrome, nie było testowane w innych przeglądarkach. Zobacz zmiany poniżej. Ta odpowiedź pozostawia się tutaj w celach historycznych.

Jeśli uważasz, że łańcuch sprawdzania poprawności nie powinien być ustawiony kodem, możesz ustawić atrybut tytułu elementu wejściowego na „To pole nie może być puste”. (Działa w Chrome 10)

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

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

W przeglądarce Firefox możesz dodać ten atrybut:

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

Edytować

Wydaje się, że to się zmieniło, odkąd napisałem tę odpowiedź. Teraz dodanie tytułu nie zmienia komunikatu o ważności, tylko dodaje załącznik do wiadomości. Nadal obowiązuje skrzypka powyżej.

Edytuj 2

Chrome nie robi teraz nic z atrybutem title od Chrome 51. Nie jestem pewien, w której wersji to się zmieniło.

Kontrolowanie niestandardowych wiadomości za pomocą HTML5 oninvalidwydarzenia jest bardzo proste

Oto kod:

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

Po ustawieniu i rozbrojeniu setCustomValiditywe właściwym czasie komunikat sprawdzania poprawności będzie działał bezbłędnie.

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

Użyłem onchangezamiast tego, oninputktóry jest bardziej ogólny i występuje, gdy wartość jest zmieniana w dowolnym stanie, nawet poprzez JavaScript.

Zrobiłem małą bibliotekę, aby ułatwić zmianę i tłumaczenie komunikatów o błędach. Możesz nawet zmieniać teksty według rodzaju błędu, który obecnie nie jest dostępny titlew Chrome lub x-moz-errormessageFirefox. Go to sprawdzić na GitHub , i przekazywać informacje zwrotne.

Jest używany jak:

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

W jsFiddle dostępna jest wersja demonstracyjna .

Wypróbuj ten, jest lepszy i przetestowany:

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

Próbny:

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

Najłatwiejszym i najczystszym sposobem, jaki znalazłem, jest użycie atrybutu danych do przechowywania niestandardowego błędu. Przetestuj poprawność węzła i obsłuż błąd, korzystając z niestandardowego kodu HTML.

le javascript

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

i trochę super HTML5

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

Rozwiązanie zapobiegające komunikatom o błędach przeglądarki Google Chrome przy wprowadzaniu każdego symbolu:

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

Mam prostsze rozwiązanie tylko waniliowe js:

W przypadku pól wyboru:

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

Dla danych wejściowych:

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

Dostosowując odpowiedź Salara do JSX i React, zauważyłem, że React Select nie zachowuje się tak jak<input/> pole dotyczące sprawdzania poprawności. Najwyraźniej potrzeba kilku obejść, aby wyświetlić tylko niestandardowy komunikat i nie wyświetlać go w niewygodnych momentach.

Podniosłem tutaj problem , jeśli coś to pomaga. Oto CodeSandbox z działającym przykładem, a najważniejszy kod jest tutaj odtworzony:

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

WybierzValid.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 działa dobrze, ale pokazuje błąd, nawet jeśli użytkownik wprowadził prawidłowe dane. Użyłem więc poniżej, aby go rozwiązać, mam nadzieję, że to również zadziała dla ciebie,

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

Można to łatwo obsłużyć, umieszczając „tytuł” ​​w polu:

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