HTML5 필수 입력란에 유효성 검사 추가

Question

입력 요소에 HTML5의 required 속성을 사용하고 유효성 검사를 위해 상자와 PHP를 선택합니다.

required 필드가 채워지지 않은 경우 어떻게 알림을 표시합니까? onsubmit()을 사용해 보았지만 어쨌든 양식이 처리되고 경고가 표시되지 않습니다.

Answer 1

사용자 브라우저가 html5를 지원하는 경우 필수 입력란이 모두 작성되지 않은 경우 양식을 제출할 수 없습니다.

일반적으로, 당신과 같이 jQuery를에 제출에서 양식을 방지 할 수 있습니다 :

$('#yourformselector').submit(function(event) { 
    $(this).find('[required="required"]').each(function() { 
     if (!$(this).val().length) { 
      event.preventDefault(); 
      return false; 
     } 
    }); 
}); 

Answer 2

는 현대/최신 웹 브라우저를 사용하는 경우, 기본 브라우저 경고가 자동으로 표시됩니다.

또는 시도 :

$(document).ready(function() { 
    $('form').submit(function() { 
     var incomplete = $('form :input').filter(function() { 
          return $(this).val() == ''; 
         }); 
     //if incomplete contains any elements, the form has not been filled 
     if(incomplete.length) { 
      alert('please fill out the form'); 
      //to prevent submission of the form 
      return false; 
     } 
    }); 
}); 

Answer 3

당신은, 그것은 등, 최소, 최대가 필요 패턴처럼 속성을 확인하려고합니다) checkValidity을 (사용할 수 있습니다 Follow this link to go deeper here

function myFunction() { 
 
    var inpObj = document.getElementById("id1"); 
 
    if (inpObj.checkValidity() == false) { 
 
     alert('invalid input') 
 
    } else { 
 
     alert('valid input') 
 
    } 
 
}

<input id="id1" type="number" min="100" max="300" required> 
 
<button onclick="myFunction()">OK</button>