HTML5 양식 필수 속성 맞춤 확인 메시지를 설정 하시겠습니까?

다음 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을 사용하고 있습니다. 똑같이 해주세요

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

나는 바닐라 자바 스크립트로 변경 에 의해 제안 Mootools의에서 @itpastorn 코멘트에,하지만 당신은 필요한 경우 동등한 Mootools의를 해결 할 수 있어야한다.

편집하다

setCustomValidity원래 답변했을 때 이해 한 것과 약간 다르게 작동 하므로 여기에서 코드를 업데이트했습니다 . setCustomValidity빈 문자열 이외의 것으로 설정된 경우 필드가 유효하지 않은 것으로 간주됩니다. 따라서 유효성을 테스트하기 전에 지워야합니다. 설정 만하고 잊을 수는 없습니다.

추가 편집

아래의 @thomasvdb의 의견에서 지적했듯이 일부 이벤트 이외의 invalid경우 사용자 지정 유효성 oninvalid을 지워야합니다. 그렇지 않으면 처리기를 통과하여 추가 로 지울 수 있습니다.

다음은 HTML5 에서 맞춤 오류 메시지를 처리하는 코드입니다.

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

이 부분은 사용자가 새 데이터를 입력 할 때 오류 메시지를 숨기므로 중요합니다.

oninput="this.setCustomValidity('')"

HTML5이벤트 의 도움으로 사용자 정의 메시지를 제어하는 ​​것은 매우 간단합니다oninvalid

코드는 다음과 같습니다.

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

이것은 가장 중요합니다 :

onvalid="this.setCustomValidity('')"

참고 : 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은 현재 Chrome 51에서 title 속성을 사용하지 않습니다. 어떤 버전으로 변경되었는지 확실하지 않습니다.

HTML5 oninvalid이벤트 의 도움으로 사용자 정의 메시지를 제어하는 ​​것은 매우 간단합니다

코드는 다음과 같습니다.

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

setCustomValidity적시에 를 설정 및 설정 해제하면 유효성 검사 메시지가 완벽하게 작동합니다.

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

나는 더 일반적이며 JavaScript를 통해 어떤 조건에서든 값이 변경 될 때 onchange대신 사용 됩니다 oninput.

오류 메시지를 쉽게 변경하고 번역 할 수 있도록 작은 라이브러리를 만들었습니다. titleChrome 또는 x-moz-errormessageFirefox 에서는 현재 사용할 수없는 오류 유형으로 텍스트를 변경할 수도 있습니다 . 이동 GitHub의에 그것을 확인 하고 피드백을 제공합니다.

다음과 같이 사용됩니다.

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

있다 jsFiddle에서 사용할 수 데모 .

더 나은 테스트를 거친이 제품을 사용해보십시오.

HTML :

<form id="myform">
    <input id="email" 
           oninvalid="InvalidMsg(this);" 
           oninput="InvalidMsg(this);"
           name="email"  
           type="email" 
           required="required" />
    <input type="submit" />
</form>

자바 스크립트 :

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/

내가 찾은 가장 쉽고 깨끗한 방법은 데이터 속성을 사용하여 사용자 지정 오류를 저장하는 것입니다. 노드가 유효한지 테스트하고 일부 사용자 정의 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>

Chrome 오류 메시지를 방지하기위한 솔루션은 각 기호를 입력합니다.

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

더 간단한 바닐라 js 전용 솔루션이 있습니다.

확인란의 경우 :

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

입력의 경우 :

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

적응 Salar는 JSX에의 대답과 반작용, 나는 선택이 단지처럼 행동하지 않는 반작용 것으로 나타났습니다 <input/>검증에 대한 필드. 사용자 지정 메시지 만 표시하고 불편한 시간에 표시되지 않도록하려면 몇 가지 해결 방법이 필요합니다.

도움이된다면 여기서 문제를 제기했습니다 . 다음 은 실제 예제가있는 CodeSandbox이며 가장 중요한 코드는 여기에 재현되어 있습니다.

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

좋아, oninvalid는 잘 작동하지만 사용자가 유효한 데이터를 입력해도 오류가 표시됩니다. 아래에서 문제를 해결하는 데 사용했습니다.

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

필드에 'title'을 넣으면 쉽게 처리 할 수 ​​있습니다.

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