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 に答える