jQueryのバリデーションを使用したajaxフォームの提出

Question

jQuery検証を使用してAJAXを使用して連絡フォームを送信しようとしています。私はフォームデータを渡す際にエラーがあると思います。検証は適切に機能しますが、AJAXには何か問題があり、わかりません。以下の私のコードを見直してください。

$(document).ready(function(){ 
    $('#test-form').validate({ 
     rules: { 
      name:{ 
       required: true, 
      }, 
      org: { 
       required: true, 
      }, 
      email: { 
       required: true, 
       email:true, 
       maxlength: 50, 
      }, 
      phone:{ 
       number:true 
      }, 
      message:{ 
       required: true, 
      } 
     }, 
     messages: { 
      name: { 
       required:"Enter Your Name", 
      }, 
      org: { 
       required:"Enter Your Organisation", 
      }, 
      email: { 
       required: "Enter Your Email Address", 
       email: "Enter correct email format", 
      }, 
      phone:{ 
       number : "Phone number must contain digits only", 
      }, 
      message:{ 
       required: "Enter Your Message", 
      } 
     }, 
     submitHandler: function(form, e) { 
      e.preventDefault(); 
      alert('three'); 

      var This = $(this); 
      var action = $(This).attr('action'); 
      var data_value = unescape($(This).serialize()); 

      $.ajax({ 
       type: "POST", 
       url: action, 
       data: data_value, 
       success: function(response) { 
        $('#ajax_contact_msg').html(response); 
       }    
      }); 
      return false; 
     } 
    }); 
}); 

Answer 1

の代わりにjQueryの検証のsubmitHandlerイベント使用.valid()機能を使用して。すべてのフォームフィールドがバリデーションを満たしている場合にのみajaxを呼び出すことができます。

下記のコードをご確認ください。

$(document).ready(function(){ 
    $('#test-form').validate({ 

    rules: { 
     name:{ 
     required: true, 
     }, 

     org:{ 
     required: true, 
     }, 

     email:{ 
     required: true, 
     email:true, 
     maxlength: 50, 

     }, 
     phone:{ 
     number:true 
     }, 
     message:{ 
     required: true, 
     } 


    }, 
    messages: { 
     name: { 
     required:"Enter Your Name", 
     }, 

     org: { 
     required:"Enter Your Organisation", 
     }, 

     email: { 
     required: "Enter Your Email Address", 
     email: "Enter correct email format", 
     }, 
     phone:{ 

     number : "Phone number must contain digits only", 
     }, 
     message:{ 
     required: "Enter Your Message", 
     } 

    } 
    }); 
}); 

if($('#test-form').valid()){ 
    alert('three'); 

    var This = $(this); 

    var action = $(This).attr('action'); 
    var data_value = unescape($(This).serialize()); 
    $.ajax({ 
    type: "POST", 
    url:action, 
    data: data_value, 

    success: function(response) { 
     $('#ajax_contact_msg').html(response); 
    }    
    }); 
    return false; 
}