Ajax 양식 유효성 검사 및 제출

Question

JQuery 유효성 검사가 유효하지 않은 양식의 유효성을 검사하는 방법에 대한 간단한 설명을 찾기 위해 이틀 동안 웹을 수색했습니다. 잘못하면 심장 마비를 겪지 않도록 정말로 도움이 될 것입니다. 여기 내 양식이다 (단지 검증에 대해 언급하십시오, 나는 좋은 코딩 관행에 대해 듣고 싶지 않아) :

<form id='test-form' class='contact-form'> 
    <ul> 
     <li><label for="full_name">Name*</label></li> 
     <li><label for="email">E-mail*</label></li> 
     <li><input id='full_name' type='text' name='full_name' onfocus="this.placeholder = ''" placeholder='Name' required></li> 
     <li><input id='email' type='text' name='email' onfocus="this.placeholder = ''" placeholder='E-mail' required></li> 
     <li>Message</li> 
     <li><textarea style='color: white; width: 100%; height:180px; background: #333333; border: none; border-radius: 3px; outline:none; font-family: montserrat;' form='contact-page-form' onfocus="this.placeholder = ''" placeholder='Please enter your message here'></textarea></li> 
     <li>Mobile Number (Optional)** <i style='font-size: 0.6em;'>for SMS updates</i></li> 
     <li><input type='text' name='phone' onfocus="this.placeholder = ''" placeholder='Phone Number' ></li> 
     <li> 
     <div class='big-button form-submit'> 
      <a onclick='document.getElementById("test-form").submit();'> 
       <div> 
        <i class="fa fa-envelope-o big message"></i> 
        SUBMIT MESSAGE 
       </div> 
      </a> 
     </div> 
     </li> 
    </ul> 
    <div class='name'> 
     <input type='text' name='name' placeholder='First Name'> // Honey pot 
    </div> 
</form> 

그리고 내 스크립트 :

$(document).ready(function(){ 
    $('.name').hide(); 

    $('#test-form').validate(); 
}); 

다른 모든 jQuery를이되었습니다 필요한 비트 가져 왔습니다 ....

내 주요 불만은 양식이 어떤 종류의 유효성 검사없이 제출된다는 것입니다. , 앞으로 K에게, 당신을

Answer 1

을 내가 PHP를 사용하고자하지만 불행히도이 사이트는 AJAX와 완벽하게 구축 할 수 있으므로 더 새로 고침 건배 사전에 ... 허용되지 않는다있다 많은 시간을 절약 할 수 있지만 JavaScript 오류 콘솔을 살펴보십시오.

당신은 링크가 유효성 검사를 트리거 click 이벤트를 우회한다 제출에 대한 귀하의 앵커 태그에 유효성 검사 플러그인 ...

1) 인라인 자바 스크립트를 깨는 두 가지 문제가 있습니다.

<a onclick='document.getElementById("test-form").submit();'> 
    .... 
</a> 

이 플러그인은 type="submit"button 또는 input을 기대하고있다. 따라서 앵커 태그를 <button> 태그로 바꾸면 인라인 JavaScript submit()이 필요하지 않습니다. <button> 요소를 사용하면 CSS로 스타일을 지정하여 텍스트 링크와 완전히 똑같이 보입니다. 다음과 같이 <textarea> 내 form 속성이 설정되어

<button type="submit"> 
    .... 
</button> 

2) ...

form='contact-page-form' 

그것은 form의 id를 포함하도록되어 있지만, 귀하의 id는 test-form,이 또한 나누기 때문에 Validate 플러그인. (단,이 경우에, 당신의 textarea 이후 form 속성이이 요소에 불필요한 & 완전히 불필요하며/제거해야합니다 수, 당신의 <form>의 내부에 이미 있습니다.)

참고 :

인라인 jQuery를 사용하는 동안 자리 표시 자용 JavaScript는 추악하고 불필요합니다. 대신에 하나의 jQuery 핸들러 함수를 사용할 수 있습니다.

$('input, textarea').on('focus', function() { 
    $(this).attr('placeholder', ''); 
}); 

근무 DEMO : http://jsfiddle.net/b9co72xj/1/

---

당신이이 type="submit"button 또는 input이 해결 방법이 사용되어야한다 앵커 태그를 사용하여 주장하는 경우 ...

<a id="button"> 
    .... 
</a> 

과 jQuery click 처리기 ...

$('#button').on('click', function(e) { 
    e.preventDefault(); 
    $('#test-form').submit(); 
}); 

DEMO # 2 : http://jsfiddle.net/b9co72xj/

---

그리고 마지막으로이 페이지 새로 고침없이 양식을 제출, 당신은 .validate() 방법의 the submitHandler callback function 내 $.ajax()을 둘 것입니다.

$('#test-form').validate({ 
    submitHandler: function(form) { 
     var data = $(form).serialize(); 
     // your ajax goes here 
     $.ajax({ 
      .... 
     }); 
     return false; 
    } 
}); 

DEMO # 3 : http://jsfiddle.net/b9co72xj/2/

Answer 2

사용 원격 메소드

 remote: { 
        param: { 
         url:siteUrlStatic+"checkNameDuplicate/", 
         dataType: "json", 

         data: { 
          full_name: function() { 
           return $("#full_name").val(); 
          } 

         }, 

         async:false 
        } 
       },