[javascript] 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을 사용하고 있습니다. 똑같이 해주세요
답변
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에서 사용할 수 데모 .
