양식 유효성 검사 및 제출 금지

Question

required 속성과 함께 html5 양식 유효성 검사 사용.

제출 버튼을 클릭하면 양식을 제출하지 않고 유효성을 검사하기 만하면됩니다.

<input type="submit" id="calculate"> 

<script> 
    $("#calculate").click(function(e) { 
     e.preventDefault(); // prevents validation 

     // do something else with form data 
    } 
</script> 

Answer 1

그것은 같이, 대신 input의 button을 사용하여 수행 할 수 있습니다 당신이

$('#myForm')[0].checkValidity(); 


<script> 
    $("#calculate").click(function(e) { 
     e.preventDefault(); // prevents form submission 

     $("#form")[0].checkValidity(); 
    } 
</script> 

Answer 2

를 사용할 수있는 양식 HTML5 유효성 검사를 트리거하려면

<button type="button" id="submitButton">Submit</button> 

그리고 양식을 검증하기 위해 자바 스크립트를 사용하여 제출을 위해 :

$('#submitButton').click(function() { 
    //Validate form 
    if(formValidated()) { 
     $('#formId').submit(); 
    } 
}); 

그냥 제출하지 않으려면 $('#formId').submit();을 삭제하십시오.

Answer 3

아이디어/데모와 마찬가지로 필수 속성을 사용하지 않고 유효성을 검사하는 방법이 있습니다. 유효성 검사 프로세스를 조금 더 제어 할 수 있으며 매우 간단합니다.

확인할 모든 입력 필드의 ID를 포함하는 배열을 작성하는 것으로 시작하십시오. 는 (동일한 방법으로 평가해야 같은 필드 ... 그룹을 가질 수있는 하나 개의 배열/대한 루프 입력 필드, 체크 박스에 대한 또 다른, 또 다른 텍스트 필드 등)

때 당신에게 return false; 양식 제출이 중단됩니다.

var arr = ['em','fn','ln']; 
 
$('#myForm').submit(function(){ 
 
    for (var n=0; n<arr.length; n++){ 
 
    $('#'+arr[n]).removeClass('errorField'); 
 
    if (arr[n] == 'em'){ 
 
     if ($('#'+arr[n]).val() == 'Bob'){ 
 
      //eval email field differently 
 
      alert('Hi Bob - you cannot complete this form'); 
 
      return false; //error condition, so abort submit 
 
     } 
 
    }else if ($('#'+arr[n]).val() == ''){ 
 
     $('#'+arr[n]).addClass('errorField').focus(); 
 
     return false; //error condition, so abort submit 
 
    } 
 
    } 
 

 
    alert("Form will now submit"); return false; //FOR DEMO ONLY 
 
    //Submit continues 
 
});

.errorField{background:yellow;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<form id="myForm" action="process.php" method="post" > 
 
    First Name: <input type="text" id="fn" name="fn" /><br> 
 
    Last Name: <input type="text" id="ln" name="ln" /><br> 
 
    Non-Required: <input type="text" id="nr" name="nr" /><br> 
 
    Email: <input type="text" id="em" name="em" /><br> 
 
    <input type="submit" id="mybutt" value="Submit" /><br> 
 
</form>