php - jQuery onClick 事件 "overrides"提交表单

Question

我有一个问题，我知道这是一个基本问题。

我有一个 html 表单:

<form id="form-contact" name="htmlform" class="styled"  accept-charset="windows-1255,utf-8,iso-8859-1,us-ascii" action= "html_form_send.php" method="post">

和用于验证表单字段的 jquery onClick 事件，与将表单提交到 php 文件的同一提交按钮相关:

 <input id="btn-submit" class="btn-submit" type="image" width="60" height="34" src="images/Site_Images/btn_contact.jpg"  name="submit_btn"

我的jquery代码如下:

$('.btn-submit').click(function(e){

    var $formId = $(this).parents('form');
    var formAction = $formId.attr('action');
    defaulttextRemove();
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    $('li',$formId).removeClass('error');
    $('span.error').remove();
    $('.required',$formId).each(function(){
        var inputVal = $(this).val();
        var $parentTag = $(this).parent();
        if(inputVal == ''){ 
            $parentTag.addClass('error').append('<span class="error">no data in the field</span>');
        }
        if($(this).hasClass('email') == true){
            if(!emailReg.test(inputVal)){
                $parentTag.addClass('error').append('<span class="error">email not accurate</span>');
            }
        }
    });

e.preventDefault();
});

<小时/>

我想要的行为是经过jquery验证后，如果一切正常则将表单提交给php。我希望我说得有道理。您能告诉我处理这种情况的正确方法吗？

谢谢。

Answer 1

不要绑定(bind)到提交按钮的click，而是绑定(bind)到表单的submit。试试这个:

$('#form-contact').submit(function(e) {
    var $form = $(this);
    var formAction = $form.attr('action');
    defaulttextRemove();
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    $('li', $form).removeClass('error');
    $('span.error').remove();
    $('.required', $form).each(function(){
        var $field = $(this);
        var inputVal = $field.val();
        var $parentTag = $field.parent();
        if (inputVal == ''){ 
            $parentTag.addClass('error').append('<span class="error">no data in the field</span>');
            e.preventDefault();
        }
        if ($field.hasClass('email')) {
            if (!emailReg.test(inputVal)){
                $parentTag.addClass('error').append('<span class="error">email not accurate</span>');
                e.preventDefault();
            }
        }
    });
});