1

私はvalidateプラグインとAJAXformプラグインの両方を使用して大成功を収めましたが、それらを一緒に使用すると困惑します。

検証プラグインを使用して検証し、成功すると、AJAXフォームを投稿しても何も起こりません。文字通り。Firebugでも、AJAXプラグインは何もしないようです。

逆に試してみると、beforeCallbackを使用してjQuery検証プラグインを呼び出します...検証は行われませんが、フォームはページに送信されます。

したがって、各プラグインを機能させることはできますが、一緒に機能させることはできません。

誰かが何か考えを持っていますか？私が説明する最初のルートは、ここでは次のように使用されます。

function sendFormVacancy() {

    alert("submit"); // This does get called, but the code below doesn't submit the form.

    var options = {

        beforeSubmit:  validateRequest,
        target:     "#messages",
        clearForm:  true,
        type:       "POST",
        url:        "/form-vacancy.php",

        success: function() {
            $('#messages').html("<p><?php _e("Application sent!", "tokheim"); ?></p>").css('color', 'green');
        },

        error: function() {
            $('#messages').html("<p><?php _e("Sorry, an error occurred.", "tokheim"); ?></p>").css('color', 'red'); 
        }

    }; 

    $("#static-form-vacancy").ajaxForm(options);

}

$("#static-form-vacancy").validate({ 

    rules: { 

        fieldfile:"required",
        fieldtitle:"required",
        fieldfirstname:{ required: true }, 
        fieldlastname:"required", 
        fieldaddress1:"required",
        fieldcity:"required",
        fieldcountry:"required",
        fieldphone:"required",
        fieldemail:{ required: true, email: true },
        fieldcontactmethod:"required",
        fieldrelocate:"required",
        fieldcomments:"required"

    }, 

    messages: { 

        fieldfile:"<?php _e("Select a file to upload", "tokheim"); ?>",
        fieldtitle:"<?php _e("Select your title", "tokheim"); ?>",
        fieldfirstname:{ required:"<?php _e("Enter your firstname", "tokheim"); ?>" },
        fieldlastname:"<?php _e("Enter your lastname", "tokheim"); ?>",
        fieldaddress1:"<?php _e("Enter your address", "tokheim"); ?>",
        fieldcity:"<?php _e("Enter your city", "tokheim"); ?>",
        fieldcountry:"<?php _e("Enter your country", "tokheim"); ?>",
        fieldphone:"<?php _e("Enter your phone number", "tokheim"); ?>",
        fieldemail:{ required:"<?php _e("Please enter an email address", "tokheim"); ?>", email:"<?php _e("Email is not valid", "tokheim"); ?>" },
        fieldcontactmethod:"<?php _e("Select an option", "tokheim"); ?>",
        fieldrelocate:"<?php _e("Select an option", "tokheim"); ?>",
        fieldcomments:"<?php _e("Enter your comments", "tokheim"); ?>"

    },

    submitHandler: function() { 
        sendFormVacancy(); 
    }

});

私が使用しているjQuery検証プラグインは次のとおりです：http： //bassistance.de/jquery-plugins/jquery-plugin-validation/

私が使用しているAJAXフォーム送信スクリプトは次のとおりです：http： //malsup.com/jquery/form/

今、私はこれをAJAXで「手動」の方法で簡単に送信できます...しかし、このプラグインを使用している理由は、必要な機能であるAJAXを介してファイルのアップロードを処理するためです。

どんな助けでも大歓迎です。髪を抜いてます！

それは、各プラグインが何らかの方法でフォームにバインドされ、他のプラグインをロックアウトすることと関係があるのでしょうか？

ありがとう、マイケル。

4

1 に答える 1

1

ajaxForm の beforeSubmit ハンドラで .valid() を呼び出します。

$('#myForm').validate({
    rules: {
        /* rules */
    },
    messages: { 
        /* messages */
    },
    submitHandler: function () {
        /* update ui before post */
    }
});

$('#myForm').ajaxForm({
    dataType: 'json',
    beforeSubmit: function () { return $('#myForm').valid(); },
    success: function (data) { /*callback, update ui after post*/ }
});
于 2013-09-28T10:59:48.853 に答える