제출 전에 입력 제출을 클릭하면 입력을 검증 할 수 있습니까?

Question

제출 버튼을 클릭하면 class = "req"인 모든 필드를 먼저 확인한 다음 비어있는 경우 제출을 중단하고 오류가 발생합니다. 그렇지 않으면 제출이 완료됩니다.

어떻게하면됩니까?

Answer 1

이 그것을 수행해야합니다 양식의 제출 이벤트에 대해 함수를 연결합니다

document.getElementById('myForm').onsubmit = function() { 
    var elems = document.getElementsByClassName('req'); 
    for(var i = 0; i < elems.length; i++) { 
     if(elems[i].value.length == 0) { 
      return false; 
     } 
    } 
} 

합니다. 이러한 요소 중 하나라도 비어 있으면 함수는 즉시 false를 반환하여 양식이 제출되지 않도록합니다.

당신이 공백 전용 값을 작성, 당신이 함께 위의 경우 조건을 대체 할 수있는 계산하지 않으려면 : 폼에 "onsubmit"이벤트 핸들러를 추가

if(elems[i].value.replace(/^\s+|\s+$/g,"").length == 0) { 
    ... 

Answer 2

것 필요할 때 행동을 취하게하십시오.

<form onsubmit="checkMyForm(this)"> 
    ... 
    </form> 

그럼 당신은 핸들러

<script> 
    function checkMyForm(myForm) { 
    for (var i = 0; i < myForm.elements.length; ++i) { 
     var input = myForm.elements[i]; 
     if (/\breq\b/.test(input.className) && !input.value) { 
     // Has an empty required input 
     alert('Please enter all required inputs'); 
     input.focus(); 
     return false; // abort form submission 
     } 
    } 
    } 
    </script>