런타임시 폼 유효성 검사 오류 메시지를 만드는 방법은 무엇입니까?

사용자가 입력하는 동안 양식을 확인하는 방법을 찾기 위해 수 시간 동안 검색했습니다. 예를 들어 우편 번호 필드를 원합니다. 이 필드의 문자 한도를 넘지 만 양식을 제출하기 전에는 사용자가 필드 아래 메시지를 보도록하고 싶습니다. 어떻게 할 수 있습니까? 이러한 코드와런타임시 폼 유효성 검사 오류 메시지를 만드는 방법은 무엇입니까?

<form method="POST" name="wrriregistration" target="_blank"><center> 
<table width="100%"> 
<tbody> 
<tr> 
<td width="149"><strong>*First Name:</strong></td> 
<td width="229"><input type="text" name="first_name" size="35" maxlength="100"/></td> 
<td width="123"><strong style="display:none;">Middle Initial:</strong></td> 
<td width="659"><input style="display:none;" type="text" name="middle_initial" size="35" maxlength="50" /></td> 
</tr> 
</tbody> 
</table> 
</form>

출처

2016-07-21 Jose Ortiz

, 그것은 PHP는 기능하지 않습니다. – coderodour

'maxlength' 속성은 너무 많은 문자를 입력하려는 사용자를 돌 봅니다. 폼에있는 것을 기반으로 할 수있는 유효성 검사 인 경우 간단한 Javascript를 사용하여'keyup','keypress' 또는'change' 이벤트 중 하나를 사용하여 필드를 검사 할 수 있습니다. 백 엔드에서 무언가에 대해 유효성을 검사해야하는 경우 AJAX를 사용해야합니다. –

감사합니다. 어떻게 그렇게? 또한 왜 PHP 기능이 설명 할 수 있을까? –

보십시오이 :

HTML

<input type="text" name="first_name"> 
<div id="error"> 
    My custom error 
</div>

CSS

#error { 
    display: none; 
} 

#error.show { 
    display: block; 
} 

input { 
    color: #000000; 
} 

.invalid { 
    color: #FF0000; 
}

var input = document.querySelector('[name="first_name"]'); 
var error = document.getElementById('error'); 

input.addEventListener('keydown', function(){ 
    // Whatever you want 
    if(this.value.length >= 10) { 
     this.classList.add('invalid'); 
     // You can control style of your invalid input with .invalid 
     error.classList.add('show'); // Display your custom error 
    } else { 
     this.classList.remove('invalid'); 
     error.classList.remove('show'); 
    } 
});

EDIT 설명 :

var input 타겟팅하는 FIRST_NAME 입력

addEventListener는 이벤트 감지한다. 인수 'keydown'을 전달하면 JavaScript가 눌려진 키를 수신합니다.

classList은 (IE에서 지원하지 않는) 클래스를 조작하는 API입니다.

는 여기를보십시오 : 당신은 그것을 위해 자바 스크립트가 필요합니다 https://jsfiddle.net/e3oe4ykf/

출처

2016-07-21 18:45:31 xXDarioXx

응답 해 주셔서 대단히 감사합니다. 나는이 같은 구현으로 위의 주석을 읽었다. –

어떻게 그 필드 중 하나의 길이를 얻을 수 있습니까? –

죄송하지만 더 구현 방법을 설명해 주시겠습니까? 나는 그것을 여러 가지 방법으로 시도해 왔고 그것을 실행시킬 수 없다. 나는 캐릭터가 이름 필드를 능가 할 때 사용자에게 경고하려고하고있다. –

런타임시 폼 유효성 검사 오류 메시지를 만드는 방법은 무엇입니까?

답변

관련 문제