2

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

我有一个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。我希望我说得通。你能告诉我这种情况的正确方法吗？

谢谢。

4

3 回答 3

2

只需$('#form-contact').submit();在所有验证都通过的情况下使用。它很简单。您可以将 js 变量设置为 0 并将其设置为 1，以防任何验证失败。最后您可以检查该变量是否仍为 0 并且在该条件内放置$('#form-contact').submit();

出于验证目的，我建议您使用 jQuery Validate http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 它可以非常准确地验证数据。

于 2012-11-03T10:24:21.937 回答
2

而不是绑定到click提交按钮的，绑定到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();
            }
        }
    });
});
于 2012-11-03T10:24:41.240 回答
0

对于一般想法： 

$('.btn-submit').click(function(e){
        e.preventDefault();
        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>');
                }
            }
        });

        if($('*.error',$formId).length) return false;
        else $formId.trigger('submit');
    });
于 2012-11-03T10:23:44.110 回答