2017-10-14 18 views
1

저는 JS와 HTML에 매우 익숙해 져서 사과드립니다. pattern = ''속성을 사용하여 입력란의 유효성을 검사하는 중 문제가 발생했습니다. 유효하지 않은 입력을 포착하고 적절한 오류 메시지를 제공하지만 입력을 수정하면 오류 메시지가 변경되지 않습니다. 예를 들어입력란의 값을 가져올 수 없습니다. JS

pattern="[a-zA-Z]"은 사용자가 필드에 "testing2"를 입력하면 적절한 메시지를 생성합니다. 그러나 사용자가 "testing"항목을 편집하면 여전히 유효성 검사 오류가 발생합니다.

이 문제를 해결하기 위해 필드 입력을 콘솔에 기록하려고했습니다. 그래서, HTML에서 : 다음

<input class="dest_one_key" name="dest_one_key" type="text" id="dest_one_key" required="" placeholder="Work">

과 :

<script> var v = document.getElementById('dest_one_key').value; document.getElementById('dest_one_key').addEventListener('change', function() { console.log( 값 : $ {V}

"값 :"yeilds ); }); </script>

...

을 콘솔에

양식이 사용자 입력을 캡처하지 않는 것 같습니다.

내가 잘못하고있는 것 : 1) 올바르지 않은 입력 후에 사용자가 유효한 입력을 가지고 있음을 올바르게 등록 할 수 없음 2) 필드 값을 콘솔에 기록 하시겠습니까?

+0

var v; document.getElementById('dest_one_key').addEventListener('change', function(event) { v = event.target.value; console.log('Value: ' + v); });
<input class="dest_one_key" name="dest_one_key" type="text" id="dest_one_key" required="" placeholder="Work">
내가 당신이 원하는 생각이 같은 그 뭔가 : https://stackoverflow.com/questions/20287650/html5-input-validate-letters-and-numbers?answertab = active – jgatjens

+0

다음은 간단한 예입니다. https://jsbin.com/natociy/2/edit?html,js,console,output – jgatjens

+0

예! 이로 인해 사용자 편집을 허용하는 페이지의 문제가 해결되었습니다. (나는 모든 곳을 검색했고, 이것은 정규 표현식에 대해 언급되지 않았다). 왜 내가 문제 2)에 부딪 혔을까요? – sarkon

답변

1

스크립트가 한 번만 실행되기 때문에 v 변수는 비어 있습니다. 이벤트에서 event.target.value을 사용하여 시간이 지남에 따라 변경해야합니다. 이처럼 :