jQuery를 폼 유효성 검사 아약스 전에

Question

자바 스크립트 비트를 제출합니다. 아이디어는 Ajax로 양식을 보내기 전에 모든 입력을 검증하는 것입니다. 나는 지금이 여러 버전을 시도했지만 양식이 완전히 채워지지는 않았지만 제출할 때마다 끝납니다. 모든 입력은 "필수"클래스입니다. 누구든지 내가 뭘 잘못하고 있는지 알 수 있니?

또한 필자는 입력 이름이 PHP로 생성되므로 클래스 기반 요구 사항에 따라 달라 지므로 어떤 이름 [id] 또는 입력 유형을 얻을 수 있는지 확신 할 수 없습니다.

"페이지"에서 질문을 표시/숨 깁니다.

<input type="button" id="next" onClick="toggleVisibility('form3')" class="next-btn"/> 

JS는 :

function toggleVisibility(newSection) 
     { 
      $(".section").not("#" + newSection).hide(); 
      $("#" + newSection).show(); 
     } 

Answer 1

당신은 submitHandler 옵션을 사용할 수 있습니다. 기본적으로 $.ajax 호출을이 처리기 안에 넣습니다. 즉, 유효성 검사 설정 논리로 반전합니다.

$('#form').validate({ 

    ... your validation rules come here, 

    submitHandler: function(form) { 
     $.ajax({ 
      url: form.action, 
      type: form.method, 
      data: $(form).serialize(), 
      success: function(response) { 
       $('#answers').html(response); 
      }    
     }); 
    } 
}); 

jQuery.validate 플러그인은 검증이 경과 한 경우는 핸들러를 제출 호출합니다.

Answer 2

당신은 일을 시도 할 수 있습니다 :

if($("#form").validate()) { 
return true; 
} else { 
return false; 
} 

Answer 3

내가 첫 번째 양식을 확인하고 유효성 검사가 통과 할 경우,보다 내가 아약스 게시물을 할 것이라고 생각합니다. 스크립트 끝 부분에 "return false"를 추가하는 것을 잊지 마십시오.

Answer 4

우선 required이 jquery.validate 플러그인에 의해 자동 감지되므로 명시 적으로 classRules을 추가 할 필요가 없습니다. 그래서이 코드를 사용할 수 있습니다 양식이 잘못된 정지가 실행 경우 양식

1. 제출을 기본 동작을
2. 을 방지 할 수 있습니다.

3. 기타 유효한 경우 ajax 요청을 보냅니다.

   $('#form').submit( function(e){  
   
         e.preventDefault(); 
         var $form = $(this); 
   
         // check if the input is valid 
         if(! $form.valid()) return false; 
   
         $.ajax({ 
          type: 'POST', 
          url: 'add.php', 
          data: $('#form').serialize(), 
          success: function(response) { 
           $("#answers").html(response); 
          } 
   
         }); 
        }); 
   

Answer 5

이 구체적인 예는 입력을 확인합니다하지만 당신은 그러나 그것을 조정할 수 귀하의 아약스 기능이 같은 추가 : JQuery와 유효성 검사가 좋은과 내가 submitHandler 생각

beforeSend: function() {      
    $empty = $('form#yourForm').find("input").filter(function() { 
     return this.value === ""; 
    }); 
    if($empty.length) { 
     alert('You must fill out all fields in order to submit a change'); 
     return false; 
    }else{ 
     return true; 
    }; 
}, 

Answer 6

해결책. 이 코드에서 아이디어를 얻으십시오.@Darin 디미트로프에서 영감을

$('.calculate').validate({ 

       submitHandler: function(form) { 
        $.ajax({ 
         url: 'response.php', 
         type: 'POST', 
         data: $(form).serialize(), 
         success: function(response) { 
          $('#'+form.id+' .ht-response-data').html(response); 
         }    
        }); 
       } 
      }); 

Answer 7

> Required JS for jquery form validation 
> ## jquery-1.7.1.min.js ## 
> ## jquery.validate.min.js ## 
> ## jquery.form.js ## 

$("form#data").validate({ 
    rules: { 
     first: { 
       required: true, 
      }, 
     middle: { 
      required: true, 
     },   
     image: { 
      required: true, 
     }, 
    }, 
    messages: { 
     first: { 
       required: "Please enter first", 
      }, 
     middle: { 
      required: "Please enter middle", 
     },   
     image: { 
      required: "Please Select logo", 
     }, 
    }, 
    submitHandler: function(form) { 
     var formData = new FormData($("#image")[0]); 
     $(form).ajaxSubmit({ 
      url:"action.php", 
      type:"post", 
      success: function(data,status){ 
       alert(data); 
      } 
     }); 
    } 
}); 

Answer 8

양식 기본 자바 스크립트 checkValidity 기능은 HTML5 검증 제출하면 어떻게됩니까

$(document).ready(function() { 
    $('#urlSubmit').click(function() { 
     if($('#urlForm')[0].checkValidity()) { 
      alert("form submitting"); 
     } 
    }); 
});