Ajax验证后提交（jQuery Mobile + Validator）

Question

我无法正常工作。它按预期验证字段，但无论我尝试什么，我都无法正确挂接提交。

这里是我的形式：

<form action="" id="m-frm-contact_us" class="m-contact_submit" method="post" data-ajax="false"> 
    <input type="text" name="firstName" placeholder="FIRST NAME" title="" id="first" class="contact full required" minlength="2" maxlength="36" /> 
    <input type="text" name="lastName" placeholder="LAST NAME" id="last" class="contact full required" minlength="2" maxlength="36" /> 
    <input type="email" name="mail" placeholder="E-MAIL ADDRESS" id="mail" class="contact full required email" /> 
    <button type="submit" name="submit_contact" value="clicked">Submit</button> 
</form> 

我的JS：

$(document).ready(function(){ 
    $.validator.addMethod(
     'placeholder', function(value, element) { 
      return value != $(element).attr("placeholder"); 
     }, 'This field is required.' 
    ); 

    $("#m-frm-contact_us").validate({ 
     rules: { 
      firstName: { 
       required: true, 
       minlength: 5, 
       placeholder: true 
      }, 
      lastName: { 
       required: true, 
       minLength: 5, 
       placeholder: true 
      }, 
      mail: { 
       required: true, 
       email: true, 
       placeholder: true 
      } 
     }, 
     messages: { 
      firstName: "First name is required.", 
      lastName: "Last name is required.", 
      email: "Valid email address is required." 
     }, 
     submitHandler: function(form) { 
      console.log('submitHandler fired.'); 
      contact.submit(); 
      return false; 
     } 
    }); 

    $('#m-frm-contact_us').submit(function(e){ 
     console.log('Submit event fired.'); 
     e.preventDefault(); 
     return false; 
    }); 

    var contact = { 
     submit : function(){ 
      console.log('Form is being submitted.'); 
     } 
    }; 
}); 

我在控制台中看到的唯一事情是 '提交触发的事件'，呼吁提交表单。尽管我付出了很多努力，但表单总是会尝试自行发布，重新加载页面。

我想执行的提交验证码：

var contact = { 
    submit : function(){ 
     console.log('Form is being submitted.'); 
     var _this = this, 
     post = $.post("/path/to/submit.php", $("#m-frm-contact_us").serialize(), function(response){ 
      try{ 
       if(response==1) { 
        _this.passed(); 
       } else { 
        _this.error(); 
       } 
      } 
      catch(e){ 
       if(typeof e == 'string') console.log(e); 
       _this.error(); 
      } 
     }); 
    }, 
    error : function(){ $.mobile.changePage("#error"); }, 
    passed : function(){ $.mobile.changePage("#passed"); } 
} 

我缺少什么？

Answer 1

我重建了JS，并能够得到这个工作。下面的代码，如果任何人遇到了类似的问题：

形式：

<form action="" method="post" id="m-frm-contact_us" novalidate="novalidate"> 
    <input type="text" name="firstName" placeholder="FIRST NAME" title="" id="first" class="contact full required placeholder noSpecial" minlength="2" maxlength="36"> 
    <input type="text" name="lastName" placeholder="LAST NAME" id="last" class="contact full required placeholder" minlength="2" maxlength="36"> 
    <input type="email" name="mail" placeholder="E-MAIL ADDRESS" id="mail" class="contact full required email"> 
    <button type="submit" name="submit_contact" value="clicked">Submit</button> 
</form> 

JS：

$.validator.addMethod('noPlaceholder', function(value, element) { 
    return value !== element.defaultValue; 
}, 'This field is required.'); 
$.validator.addMethod(
    'placeholder', function(value, element) { 
     return value != $(element).attr("placeholder"); 
    }, 'This field is required.' 
); 
$.validator.addMethod("regex", function(value, element, regexp) { 
    var check = false; 
    var re = new RegExp(regexp); 
    return this.optional(element) || re.test(value); 
}, "No special Characters allowed here. Use only upper and lowercase letters (A through Z; a through z)"); 

$('#m-frm-contact_us').submit(function(event) { 
    event.preventDefault(); 

    if($(this).validate({ 
     rules : { 
      first_name : { 
       required : true, 
       maxlength : 36, 
       regex : /^[A-Za-z\s`'"\\-]+$/ 
      }, 
      last_name : { 
       required : true, 
       maxlength : 36, 
       regex : /^[A-Za-z\s`'"\\-]+$/ 
      } 
     } 
    }).form()) { 
     var $form = $(this), formData = { 
      firstName : $form.find('#first').val(), 
      lastName : $form.find('#last').val(), 
      mail : $form.find('#mail').val() 
     }; 
     $.post('/path/to/submit.php', formData, function(response) { 
      if(response == 1) { 
       $.mobile.changePage("#passed"); 
      } else { 
       $.mobile.changePage("#error"); 
      } 
     }) 
    }; 

    return false; 
})