Program Club

부트 스트랩의 폼 컨트롤 팝 오버에서 필수 필드의 기본 메시지를 변경하는 방법은 무엇입니까?

proclub 2021. 1. 9. 10:22
반응형

부트 스트랩의 폼 컨트롤 팝 오버에서 필수 필드의 기본 메시지를 변경하는 방법은 무엇입니까?


 <form class="form-asd" role="form">
    <h2 class="form-signin-heading">login</h2><hr />
    <label class="control-label"  for="username">Username</label>
    <input class="form-control" type="email"  required="" placeholder="username"data-error="enter valid username"></input>
    <label class="control-label"  for="username">password</label>
    <input class="form-control" type="password"  required=" " placeholder="Password"></input>
    <label class="checkbox"></label>
    <button class="btn btn-lg btn-primary " type="submit">submit</button>
</form>

필수 필드 "이 필드를 입력하십시오"를 "사용자 이름을 입력하십시오"로 팝업의이 기본 메시지를 어떻게 변경할 수 있습니까?


이벤트 발생시 setCustomValidity기능 을 사용할 수 있습니다 oninvalid.

아래와 같이 :-

<input class="form-control" type="email" required="" 
    placeholder="username" oninvalid="this.setCustomValidity('Please Enter valid email')">
</input>

최신 정보:-

입력을 시작한 후 메시지를 지우려면 oninput="setCustomValidity('')속성을 사용 하여 메시지를 지우십시오.

<input class="form-control" type="email"  required="" placeholder="username"
 oninvalid="this.setCustomValidity('Please Enter valid email')"
 oninput="setCustomValidity('')"></input>

Mritunjay와 Bartu의 답변의 조합은이 질문에 대한 완전한 답변입니다. 전체 예제를 복사합니다.

<input class="form-control" type="email"  required="" placeholder="username"
 oninvalid="this.setCustomValidity('Please Enter valid email')"
 oninput="setCustomValidity('')"></input>

여기,

this.setCustomValidity ( 'Please Enter valid email') " -필드가 무효화되면 사용자 지정 메시지를 표시합니다.

oninput = "setCustomValidity ( '')" -검증 된 파일에서 무효화 메시지를 제거합니다.


그리고 모든 입력에 대해 다음을 선택합니다.

$("input[required], select[required]").attr("oninvalid", "this.setCustomValidity('Required!')");
$("input[required], select[required]").attr("oninput", "setCustomValidity('')");

$ ( "input [required]"). attr ( "oninvalid", "this.setCustomValidity ( 'Say Somthing!')");

마우스로 이전 또는 다음 필드로 이동하면 작동하지만 엔터 키로는 작동하지 않습니다 !!!

참조 URL : https://stackoverflow.com/questions/24391078/how-to-change-the-default-message-of-the-required-field-in-the-popover-of-form-c

반응형