1

私のフォームはキーアップで検証されますが、送信時にも検証しようとすると、どうしたらよいかわかりません。

これは私のHTMLです：

   <form action="#" method="post">                      
        <section class="col">   

            <section class="row">                   
                <label for="name">Name</label>
                <input type="text" name="name" value="" id="name" class="field validate-field valid-name" />                    
            </section>

            <section class="row">                   
                <label for="email">Email Address</label>
                <input type="text" name="email" value="" id="email" class="field validate-field valid-mail" />                  
            </section>

            <section class="row">                   
                <label for="phone">Phone Number</label>
                <input type="text" name="phone" value="" id="phone" class="field validate-field valid-phone" />                     
            </section>                  
        </section>

        <section class="col">               
            <label for="message">Message</label>
            <textarea class="field validate-field valid-text" name="message" id="message-field"></textarea>
            <input type="submit" value="Submit" class="submit-button" />
        </section>
   </form>

JS：

function validate( field ){
    var value = field.val();
    var to_label = field.parent().find('label');
    var error = false;
    var error_message = '';

    to_label.find('span').remove();

    if ( field.hasClass('validate-field') && value == '' ) {
        error = true;
        error_message = 'Empty Field';  
    } else if ( field.hasClass('valid-name') && valid_name(value) == false ) {
        error = true;
        error_message = 'Name must consist characters only';
    } else if ( field.hasClass('valid-mail') && valid_email(value) == false ) {
        error = true;
        error_message = 'Invalid Email';
    } else if ( field.hasClass('valid-phone') && valid_phone(value) == false ) {
        error = true;
        error_message = 'Your phone must be digits only';
    };

    if ( error == true ) {
        to_label.append('<span>'+ error_message +'</span>');
    }
};


$('.validate-field').live('keyup', function(){
    validate( $(this) );
});

function valid_name(value){
    var valid = /^([a-zA-Z_\.\-\+])+$/;
    return valid.test(value);
};

function valid_email(value){
    var valid = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return valid.test(value);
};

function valid_phone(value){
    var valid = /^[0-9-+]+$/;
    return valid.test(value);

};

そして、私はこのようなものを追加する必要があります：

$('form').live('submit', function(){

    if ( "...validated..." ) {  
        $.post('send.php', $('form').serialize(), function(){
            alert('sent to PHP.');
        })  
    };
    return false;
});

送信機能には何を含める必要がありますか？

私が試してみました：

$('form').live('submit', function(){

    var valid = validate( $('.field') )

    if ( valid  == true ) { 
        $.post('send.php', $('form').serialize(), function(){
            alert('sent to PHP.');
        })  
    };
    return false;
});

ただし、これにより、すべてのフォームがすべての検証（電子メール、電話など）で検証されます。validation()関数で追加しようとしましたがif (error == false){ return: true }、送信関数で実行validation()して追加しましif ( validation() == true ){ .. to send php ..}た。それもうまくいきませんでした。私は何をする必要がありますか ？

4

2 に答える 2

2

次の方法でフォーム全体を検証できると思います。

function validateAll() {
    var valid = true;
    $('form').find('.validate-field').each(function (i, e) {
        if (!validate($(this))) {
           valid = false;
            return;
        }
    });
    return valid;
}

function validate( field ){
    var value = field.val();
    var to_label = field.parent().find('label');
    var error = false;
    var error_message = '';

    to_label.find('span').remove();

    if ( field.hasClass('validate-field') && value == '' ) {
        error = true;
        error_message = 'Empty Field';  
    } else if ( field.hasClass('valid-name') && valid_name(value) == false ) {
        error = true;
        error_message = 'Name must consist characters only';
    } else if ( field.hasClass('valid-mail') && valid_email(value) == false ) {
        error = true;
        error_message = 'Invalid Email';
    } else if ( field.hasClass('valid-phone') && valid_phone(value) == false ) {
        error = true;
        error_message = 'Your phone must be digits only';
    };

    if (error) {
        to_label.append('<span>'+ error_message +'</span>');
    }
    return !error;

};

$('form').live('submit', function(){

    if (validateAll()) {  
        $.post('send.php', $('form').serialize(), function(){
            alert('sent to PHP.');
        })  
    };
    return false;
});

私の意見では、これが最小限のリファクタリングを必要とするオプションです。

関数の機能について説明しますvalidateAll。クラスを持つすべてのフィールドを検索しvalidate-field、それを引数としてvalidate関数に渡します。私が行ったリファクタリングのため、フィールドが無効な場合はvalidate返されます。そのため、特定の入力で呼び出して無効な場合は、falseを返します（フォームは無効です）。falsevalidate

これがJSfiddleの例です。

より高度な検証については、http： //docs.jquery.com/Plugins/ValidationまたはjqxValidatorのような検証プラグインをお勧めします。

于 2013-01-22T10:16:44.887 に答える
0

ほぼ完了です。以下のコードを追加するだけで、機能します

$('form').submit(function(){
    var field = $(this).find('.validate-field');
    validate( field );
});

これで問題が解決することを願っています。

フィドル： http： //jsfiddle.net/r1webs/cFeCx/

于 2013-01-22T10:18:44.367 に答える