Thuộc tính yêu cầu dạng HTML5. Đặt thông báo xác thực tùy chỉnh?

Tôi đã có mẫu HTML5 sau: 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"/>

Hiện tại khi tôi nhấn enter khi cả hai đều trống, một hộp bật lên xuất hiện với nội dung "Vui lòng điền vào trường này". Làm cách nào để thay đổi tin nhắn mặc định đó thành "Trường này không thể để trống"?

EDIT: Cũng lưu ý rằng thông báo lỗi của trường mật khẩu chỉ đơn giản là *****. Để tạo lại điều này, cung cấp cho tên người dùng một giá trị và nhấn gửi.

EDIT : Tôi đang sử dụng Chrome 10 để thử nghiệm. Hãy làm như vậy

Sử dụng 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("");
        };
    }
})

Tôi đã đổi thành JavaScript vanilla từ Mootools theo đề xuất của @itpastorn trong các nhận xét, nhưng bạn sẽ có thể tìm ra Mootools tương đương nếu cần.

Biên tập

Tôi đã cập nhật mã ở đây vì setCustomValidityhoạt động hơi khác với những gì tôi hiểu khi tôi trả lời ban đầu. Nếu setCustomValidityđược đặt thành bất kỳ thứ gì ngoài chuỗi trống, nó sẽ khiến trường được coi là không hợp lệ; do đó bạn phải xóa nó trước khi kiểm tra tính hợp lệ, bạn không thể chỉ đặt nó và quên.

Chỉnh sửa thêm

Như được chỉ ra trong bình luận của @ thomasvdb bên dưới, bạn cần phải xóa tính hợp lệ tùy chỉnh trong một số sự kiện bên ngoài invalidnếu không có thể có thêm thông qua oninvalidtrình xử lý để xóa nó.

Đây là mã để xử lý Thông báo lỗi tùy chỉnh trong HTML5

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

Phần này rất quan trọng vì nó ẩn thông báo lỗi khi người dùng nhập dữ liệu mới:

oninput="this.setCustomValidity('')"

Rất đơn giản để kiểm soát thư tùy chỉnh với sự trợ giúp của HTML5sự kiệnoninvalid

Đây là mã:

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

Điều này là quan trọng nhất:

onvalid="this.setCustomValidity('')"

Lưu ý: Điều này không còn hoạt động trong Chrome, không được thử nghiệm trong các trình duyệt khác. Xem các chỉnh sửa dưới đây. Câu trả lời này đang được để lại ở đây để tham khảo lịch sử.

Nếu bạn cảm thấy rằng chuỗi xác thực thực sự không nên được đặt theo mã, bạn có thể đặt thuộc tính tiêu đề của phần tử đầu vào thành "Trường này không thể để trống". (Hoạt động trong Chrome 10)

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

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

Và trong Firefox, bạn có thể thêm thuộc tính này:

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

Biên tập

Điều này dường như đã thay đổi kể từ khi tôi viết câu trả lời này. Bây giờ thêm một tiêu đề không thay đổi thông báo hợp lệ, nó chỉ thêm một phụ lục vào tin nhắn. Các fiddle ở trên vẫn áp dụng.

Chỉnh sửa 2

Chrome hiện không làm gì với thuộc tính tiêu đề như Chrome 51. Tôi không chắc phiên bản này đã thay đổi.

Rất đơn giản để kiểm soát tin nhắn tùy chỉnh với sự trợ giúp của HTML5 oninvalidsự kiện

Đây là mã:

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

Bằng cách cài đặt và bỏ cài đặt setCustomValidityđúng thời điểm, thông báo xác thực sẽ hoạt động hoàn hảo.

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

Tôi đã sử dụng onchangethay vì oninputchung chung hơn và xảy ra khi giá trị được thay đổi trong bất kỳ điều kiện nào ngay cả thông qua JavaScript.

Tôi đã tạo một thư viện nhỏ để dễ dàng thay đổi và dịch các thông báo lỗi. Bạn thậm chí có thể thay đổi văn bản theo loại lỗi hiện không có sẵn bằng titleChrome hoặc x-moz-errormessagetrong Firefox. Hãy kiểm tra nó trên GitHub và đưa ra phản hồi.

Nó được sử dụng như:

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

Có một bản demo có sẵn tại jsFiddle .

Hãy thử cái này, nó tốt hơn và được thử nghiệm:

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

Bản giới thiệu:

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

Cách dễ nhất và sạch nhất tôi đã tìm thấy là sử dụng thuộc tính dữ liệu để lưu trữ lỗi tùy chỉnh của bạn. Kiểm tra tính hợp lệ của nút và xử lý lỗi bằng cách sử dụng một số html tùy chỉnh.

javascript

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

và một số siêu HTML5

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

Giải pháp ngăn chặn thông báo lỗi Google Chrome khi nhập từng ký hiệu:

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

Tôi có một giải pháp vanilla js đơn giản hơn:

Đối với các hộp kiểm:

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

Đối với đầu vào:

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

Thích ứng Salar câu trả lời 's để JSX và phản ứng, tôi nhận thấy rằng Phản ứng Chọn không cư xử giống như một <input/>lĩnh vực liên quan đến xác nhận. Rõ ràng, một số cách giải quyết là cần thiết để chỉ hiển thị thông báo tùy chỉnh và để giữ cho nó không hiển thị vào thời điểm bất tiện.

Tôi đã nêu ra một vấn đề ở đây , nếu nó giúp bất cứ điều gì. Đây là một CodeSandbox với một ví dụ hoạt động và mã quan trọng nhất được sao chép ở đây:

Xin chào

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

ChọnValid.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}
      />
    );
  }
}

Được rồi, oninvalid hoạt động tốt nhưng nó hiển thị lỗi ngay cả khi người dùng nhập dữ liệu hợp lệ. Vì vậy, tôi đã sử dụng dưới đây để giải quyết nó, hy vọng nó cũng sẽ làm việc cho bạn,

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

Có thể dễ dàng xử lý bằng cách chỉ cần đặt 'tiêu đề' với trường:

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