HTML5 表單必需屬性。 設置自定義驗證消息？

Question

我有以下 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"/>

目前，當我在它們都為空白時按 Enter 鍵時，會出現一個彈出框，上面寫着“請填寫此字段”。 如何將該默認消息更改為“此字段不能留空”？

編輯：另請注意，類型密碼字段的錯誤消息只是***** 。 要重新創建它，請給用戶名一個值並點擊提交。

編輯：我正在使用 Chrome 10 進行測試。 請做同樣的事情

Answer 1

這是在 HTML5 中處理自定義錯誤消息的代碼：

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

這部分很重要，因為它在用戶輸入新數據時隱藏了錯誤消息：

oninput="this.setCustomValidity('')"

Answer 2

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

我按照@itpastor在評論中的建議從 Mootools更改為 vanilla JavaScript ，但如果需要，您應該能夠計算出 Mootools 等效項。

編輯

我在這里更新了代碼，因為setCustomValidity的工作方式與我最初回答時的理解略有不同。 如果setCustomValidity設置為空字符串以外的任何內容，則會導致該字段被視為無效； 所以你必須在測試有效性之前清除它，你不能只是設置它而忘記。

進一步編輯

正如下面@thomasvdb 的評論中所指出的，您需要在invalid之外的某些事件中清除自定義有效性，否則可能需要額外通過oninvalid處理程序來清除它。

Answer 3

借助HTML5事件oninvalid控制自定義消息非常簡單

這是代碼：

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

這是最重要的：

onvalid="this.setCustomValidity('')"

Answer 4

注意：這不再適用於 Chrome，未在其他瀏覽器中測試。 請參閱下面的編輯。 這個答案留在這里供歷史參考。

如果您覺得驗證字符串確實不應該由代碼設置，您可以將輸入元素的標題屬性設置為“此字段不能留空”。 （適用於 Chrome 10）

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

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

在 Firefox 中，您可以添加此屬性：

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

編輯

自從我最初寫這個答案以來，這似乎已經改變了。 現在添加標題不會更改有效性消息，它只是在消息中添加一個附錄。 上面的小提琴仍然適用。

編輯 2

從 Chrome 51 開始，Chrome 現在對 title 屬性沒有任何作用。我不確定這在哪個版本中發生了變化。

Answer 5

借助HTML5 oninvalid事件控制自定義消息非常簡單

這是代碼：

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

Answer 6

通過在正確的時間設置和取消設置setCustomValidity ，驗證消息將完美運行。

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

我使用了onchange而不是oninput ，后者更通用，並且即使通過 JavaScript 在任何條件下更改值時也會發生。

Answer 7

我制作了一個小型庫來輕松更改和翻譯錯誤消息。 您甚至可以使用 Chrome 中的title或 Firefox 中x-moz-errormessage目前無法使用的錯誤類型更改文本。 去GitHub 上查看，並提供反饋。

它的用法如下：

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

jsFiddle 提供了一個演示。

Answer 8

試試這個，它更好並且經過測試：

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

演示：

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

Answer 9

我發現的最簡單和最干凈的方法是使用數據屬性來存儲您的自定義錯誤。 使用一些自定義 html 測試節點的有效性並處理錯誤。

文件

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

和一些超級HTML5

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

Answer 10

防止谷歌瀏覽器在輸入每個符號時出現錯誤消息的解決方案：

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

Answer 11

我有一個更簡單的純 js 解決方案：

對於復選框：

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

對於輸入：

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

Answer 12

好的，oninvalid 效果很好，但即使用戶輸入了有效數據，它也會顯示錯誤。 所以我用下面的方法來解決它，希望它也對你有用，

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

Answer 13

調整Salar對 JSX 和 React 的回答，我注意到 React Select 的行為與驗證有關的<input/>字段不同。 顯然，需要幾種解決方法來僅顯示自定義消息並防止其在不方便的時間顯示。

我在這里提出了一個問題，如果它有幫助的話。 這是一個帶有工作示例的 CodeSandbox，其中最重要的代碼在此處復制：

你好.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 14

如果您的錯誤消息是單一的，請在下面嘗試。

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

要處理多個錯誤，請嘗試以下操作

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

例子

您可以測試 valueMissing 和 valueMissing。

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

• 有效性狀態

Answer 15

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

})

Answer 16

對於完全自定義的檢查邏輯：

 $(document).ready(function() { $('#form').on('submit', function(e) { if ($('#customCheck').val() != 'apple') { $('#customCheck')[0].setCustomValidity('Custom error here! "apple" is the magic word'); $('#customCheck')[0].reportValidity(); e.preventDefault(); } }); $('#customCheck').on('input', function() { $('#customCheck')[0].setCustomValidity(''); }); });

 input { display: block; margin-top: 15px; } input[type="text"] { min-width: 250px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form"> <input type="text" placeholder="dafault check with 'required' TAG" required/> <input type="text" placeholder="custom check for word 'apple'" id="customCheck" /> <input type="submit"> </form>

Answer 17

只需將“標題”與該字段一起即可輕松處理：

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