ajax를 통해 제출하기 전에 jquery 유효성 검사를 사용하여 폼의 유효성을 검사하십시오.

Question

Ajax를 사용하여 양식을 특정 페이지에 제출하고 메시지를 다시 가져 오려고합니다. jqueryvalidation 플러그인을 사용하여 양식의 유효성을 검사하려고합니다. Ajax를 통해 양식을 제출할 때 다음 코드를 사용하고 있습니다.

<script type ="text/javascript"> 

jQuery(document).ready(function() { 

    jQuery("#footercontact").submit(function(event) { 
    form = $('#footercontact').serialize(); 
    $('#footercontact').validate(); 
    $.ajax({ 
     type: 'post', 
     url: '<?php echo base_url();?>index.php/welcome/test', 
     data: form, 
     dataType: 'html', 
     success: function(data) { 
     $("#contactname").val('Name'); 
     $("#contactemail").val('Email'); 
     $("#contactmessage").val('Message'); 
     $("#contactsuccess").html(data); 
     } 
    }); 
    event.preventDefault(); 
    }); 
}); 

</script> 

현재이 코드는 유효성 검사없이 코드를 직접 게시하고 있습니다. 다른 것이 있으면 꼭 알아야 할 것이 있습니다. 그리고 폼을 Ajax를 통해 제출하기 전에 폼을 검증하는 다른 방법을 알고 있다면 도움을 요청하십시오. 여기 return boolean 사용 $('#footercontact').valid() 형태

의 HTML 코드

<form name="footercontact" id="footercontact" method="POST" action=""> 

    <input type="text" id="contactname" name="name" onblur="if(this.value=='')this.value='Name';" onfocus="if(this.value=='Name')this.value='';" value="Name" class="required"> 

    <input type="text" id="contactemail" name="email" onblur="if(this.value=='')this.value='Email';" onfocus="if(this.value=='Email')this.value='';" value="Email" class="required email"> 

    <textarea name="message" id="contactmessage" cols="" rows="" onblur="if(this.value=='')this.value='Message';" onfocus="if (this.value=='Message')this.value='';" value="Message" class="required"></textarea> 

    <input name="submit" type="button" onclick="jsvalidate()" value="Submit" id="submitsave"> 

</form> 

Answer 1

입니다.

jQuery(document).ready(function() { 
    jQuery("#footercontact").submit(function(event) { 
    form = $(this).serialize(); 
    $(this).validate(); 
    if (!$(this).valid()) return false; 
    $.ajax({ 
     type: 'post', 
     url: '<?php echo base_url();?>index.php/welcome/test', 
     data: form, 
     dataType: 'html', 
     success: function(data) { 
     $("#contactname").val('Name'); 
     $("#contactemail").val('Email'); 
     $("#contactmessage").val('Message'); 
     $("#contactsuccess").html(data); 
     } 
    }); 
    event.preventDefault(); 

    }); 
});