HTML5 membentuk atribut yang diperlukan. Setel pesan validasi khusus?

Saya mendapatkan formulir HTML5 berikut: 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"/>

Saat ini ketika saya menekan enter ketika keduanya kosong, kotak popup muncul mengatakan "Silakan isi bidang ini". Bagaimana cara saya mengubah pesan default menjadi "Bidang ini tidak dapat dibiarkan kosong"?

EDIT: Juga perhatikan bahwa pesan kesalahan bidang kata sandi jenis ini sederhana *****. Untuk membuat ulang ini beri nilai pada nama pengguna dan tekan kirim.

EDIT : Saya menggunakan Chrome 10 untuk pengujian. Silakan lakukan hal yang sama

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

Saya berubah menjadi JavaScript vanilla dari Mootools seperti yang disarankan oleh @itpastorn di komentar, tetapi Anda harus dapat bekerja di luar setara Mootools jika perlu.

Edit

Saya telah memperbarui kode di sini karena setCustomValidityberfungsi sedikit berbeda dengan apa yang saya pahami ketika saya awalnya menjawab. Jika setCustomValiditydiatur ke selain string kosong itu akan menyebabkan bidang dianggap tidak valid; karena itu Anda harus menghapusnya sebelum menguji validitas, Anda tidak bisa hanya mengatur dan melupakannya.

Sunting lebih lanjut

Seperti yang ditunjukkan dalam komentar @ thomasvdb di bawah ini, Anda perlu menghapus validitas khusus dalam beberapa kejadian di luar invalidjika tidak, mungkin ada pass tambahan melalui oninvalidhandler untuk menghapusnya.

Berikut adalah kode untuk menangani Pesan Kesalahan Khusus dalam HTML5

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

Bagian ini penting karena menyembunyikan pesan kesalahan ketika pengguna memasukkan data baru:

oninput="this.setCustomValidity('')"

Sangat mudah untuk mengontrol pesan khusus dengan bantuan HTML5acaraoninvalid

Ini kode:

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

Ini yang paling penting:

onvalid="this.setCustomValidity('')"

Catatan: Ini tidak lagi berfungsi di Chrome, tidak diuji di peramban lain. Lihat hasil edit di bawah. Jawaban ini ditinggalkan di sini untuk referensi sejarah.

Jika Anda merasa bahwa string validasi benar-benar tidak boleh diatur oleh kode, Anda dapat mengatur atribut judul elemen input Anda untuk membaca "Bidang ini tidak dapat dibiarkan kosong". (Bekerja di Chrome 10)

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

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

Dan di Firefox, Anda dapat menambahkan atribut ini:

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

Edit

Ini tampaknya telah berubah sejak saya awalnya menulis jawaban ini. Sekarang menambahkan judul tidak mengubah pesan validitas, itu hanya menambahkan addendum ke pesan. Biola di atas masih berlaku.

Edit 2

Chrome sekarang tidak melakukan apa pun dengan atribut title pada Chrome 51. Saya tidak yakin versi mana yang diubah.

Sangat mudah untuk mengontrol pesan khusus dengan bantuan HTML5 oninvalidacara

Ini kodenya:

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

Dengan mengatur dan membatalkan pengaturan setCustomValiditypada waktu yang tepat, pesan validasi akan berfungsi dengan sempurna.

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

Saya menggunakan onchangealih-alih oninputyang lebih umum dan terjadi ketika nilainya diubah dalam kondisi apa pun bahkan melalui JavaScript.

Saya telah membuat perpustakaan kecil untuk memudahkan mengubah dan menerjemahkan pesan kesalahan. Anda bahkan dapat mengubah teks berdasarkan jenis kesalahan yang saat ini tidak tersedia menggunakan titledi Chrome atau x-moz-errormessagedi Firefox. Go check it out di GitHub , dan memberikan umpan balik.

Ini digunakan seperti:

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

Ada demo yang tersedia di jsFiddle .

Coba yang ini, lebih baik dan teruji:

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

Demo:

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

Cara termudah dan terbersih yang saya temukan adalah menggunakan atribut data untuk menyimpan kesalahan khusus Anda. Uji simpul untuk validitas dan atasi kesalahan dengan menggunakan beberapa html khusus.

le javascript

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

dan beberapa HTML5 super

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

Solusi untuk mencegah pesan kesalahan Google Chrome pada input setiap simbol:

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

Saya punya satu-satunya solusi vanilla js yang lebih sederhana:

Untuk kotak centang:

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

Untuk input:

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

Mengadaptasi jawaban Salar ke JSX dan React, saya perhatikan bahwa React Select tidak berperilaku seperti<input/> bidang tentang validasi. Tampaknya, beberapa solusi diperlukan untuk hanya menampilkan pesan khusus dan agar tidak muncul pada waktu yang tidak nyaman.

Saya telah mengangkat masalah di sini , jika itu membantu apa pun. Berikut adalah CodeSandbox dengan contoh yang berfungsi, dan kode paling penting di sana direproduksi di sini:

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

Oke, oninvalid berfungsi dengan baik tetapi itu menunjukkan kesalahan bahkan jika pengguna memasukkan data yang valid. Jadi saya telah menggunakan di bawah ini untuk mengatasinya, berharap itu akan bekerja untuk Anda juga,

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

Dapat dengan mudah ditangani dengan hanya menempatkan 'judul' dengan bidang:

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