1

メールとメッセージテキストを入力するとメッセージを送信するフォームがあります。結果を返すために、jQuery Validation Engine プラグインと ajax レスポンスの両方を使用したいと考えています。このために、私jQuery('#messageSendButton').click()はすべての場合で同じ関数を使用します。

コントローラーから応答を返すには:

<script type="text/javascript">
                jQuery('#messageSendButton').click(function () {

                    var url = '@Url.Action("SendQuickMessage", "Home")';
                    var email = $('#email').val();
                    var messageText = $('#messageText').val();

                    $.ajax({
                        url: url,
                        type: 'GET',
                        contentType: 'application/json',
                        data: { Email: email, Message: messageText },
                        success: function (result) {
                            if (result.success) {
                                alert("Message sent! Thanks!");
                            }
                            else {
                                alert("Error occured!");
                            }
                        },

                        complete: function () {
                            $(".loading").hide();
                        }
                    });
                });
            </script>

そして、フォームを検証するには:

  <script type="text/javascript">
                jQuery(document).ready(function () {
                    jQuery('#quickMessageForm').validationEngine('init');
                    jQuery('#messageSendButton').click(function () {
                        jQuery('#quickMessageForm .loading').animate({ opacity: 1 }, 250);
                        if (jQuery('#quickMessageForm').validationEngine('validate')) {

                            jQuery.post('/Home/SendQuickMessage', {
                                Email: jQuery('#email').val(),
                                Message: jQuery('#message').val(),
                                formname: 'messageForm',
                                formtype: 'messageF'
                            }, function () {
                                jQuery('#quickMessageForm .loading').hide();
                            });

                            return false;
                        } else {
                         jQuery('#quickMessageForm .loading').animate({ opacity: 0 }, 250);
                            return false;
                        }
                    });
                });
            </script>

別々に、両方とも単独で動作しますが、一緒にすると、最初に ajax 関数が動作し、2 番目の検証が動作します。それは正しくありません。. それらを1つにまとめるにはどうすればよいですか?最初にフォームを検証し、次に ajax 応答を取得します。

編集:

フォームは次のとおりです。

 <form action="#" method="post" id="quickMessageForm">
            <div class="form_info cmsms_input">
                <label>Email<span class="color_3"> *</span></label>
                @Html.TextBoxFor(model => model.Email, new { name = "email", id = "email", tabidex = 1, @class = "validate[required,custom[email]]" })
            </div>
            <div class="form_info cmsms_textarea">
                <label>Message<span class="color_3"> *</span></label>
                @Html.TextAreaFor(model => model.Message, new { id = "messageText", name = "messageText", tabindex = 2, @class = "validate[required,minSize[10]]" })
            </div>
            <div class="loading"></div>
            <div>
                <input type="submit" name="messageSendButton" id="messageSendButton" value="Send" class="button_small" tabindex="3" />
            </div>
        </form>
4

1 に答える 1

1

以下のように試すことができます。

つまり、あなたのajax呼び出しを行いますasync:false

$.ajax({
url: restmethod,
type: "POST",
contentType: "application/json",
async:false
success: function(data) {
    return data.d; 
}
});

これがお役に立てば幸いです。

于 2013-01-12T09:52:43.770 に答える