jquery 유효성 검사가 작동하지 않는 Materializecss

Question

HTML 마크 업;

<div id="address" class="col s12"> 
    <div class="row"> 
     <form method="post" action="" id="addressDetails"> 
      <div class="input-field col s6"> 
       <textarea id="lAddress" name = 'lAddress' minlength='20' maxlength='100' class="materialize-textarea" class="validate" required length="100"></textarea> 
       <label for="lAddress" data-error="Must be between 20 to 100 Characters">Local Address</label> 
      </div> 
      <div class="input-field col s6"> 
       <textarea id="pAddress" name = 'pAddress' minlength='20' maxlength='100' class="materialize-textarea" class="validate" required length="100"></textarea> 
       <label for="pAddress" data-error="Must be between 20 to 100 Characters">Permanent Address</label> 
      </div> 
     </form> 
    </div> 
    <div class="row center-align"> 
     <button type="submit" name="submitAddress" form="addressDetails" class="waves-effect waves-light light-blue darken-1 btn updateProfile">Save Address Details</button> 
    </div> 
</div> 

자바 스크립트 코드 :

function updateProfile(event) { 
    console.log(this); 
    event.preventDefault(); 
    form = $(this).closest('.col.s12').find('form'); 
    $.ajax('profile/updateProfile.php', { 
     type: "POST", 
     dataType: "json", 
     data: form.serialize(), 
     success: function(result) { 
      Materialize.toast(result.message, 4000); 
     }, 
     error: function() { 
      Materialize.toast("Failed: Please contact admin.", 4000); 
     }, 
     timeout: 5000 
    }); 
} 

$(document).ready(function() { 
    $("button.updateProfile").on('click', updateProfile); 
}); 

이전 일반 양식 제출 유효성 검사가 작동했다. 하지만 지금은 jQuery AJAX 요청으로 데이터를 보낼 수 있지만 양식이 유효하지 않은 경우 오류가 빨간색으로 표시되지만 오류가있는 양식은 허용됩니다.

$("button.updateProfile").on('sumbit', updateProfile);을 사용할 때 유효성을 검사하고 있지만 페이지를 다시로드하고 preventDefault가 작동하지 않습니다.

Answer 1

$("button.updateProfile").on('click', updateProfile);

이 구체화 된 유효성 검사의 도움으로 유효성을 검사하지 않습니다. submit을 찾아야합니다.

다시 제출하면 문제가 발생하며 양식 제출을 찾지 못합니다. 대신 버튼을 사용 양식의

$("button.updateProfile").on('sumbit', updateProfile);

, 다음 양식 제출을 찾습니다. 이

$("form").on('submit', updateProfile);

처럼이 완벽하게 작동합니다.

제출 버튼이 아닌 양식 제출을 위해 양식 검사를 제출할 때마다 기억하십시오.