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

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

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

Answer 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();
            }
        }
    });
});

Answer 3

总体思路：

$('.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');
    });

jQuery onClick事件“覆盖”提交表单

3 个答案: