0

私はフォームを持っています:

<form id="myform" method="post" action="www.wherever.com/page2">

<div class="question">
 <label for="q1">What is your name?</label>
 <input id="q1" name="q1" size="10" maxlength="10"/>
</div>

<input type="submit" value="Continue" />

</form>

jquery 検証プラグインによって検証されるもの:

(function($,W,D)
{
    var VALIDATE = {};

    VALIDATE.UTIL =
    {
        setupFormValidation: function()
        {
            $("#myform").validate({
                rules: {
                    q1: {required: true},                           
                    },

                messages: {
                    q1:     {
                        required: "Answer the question",
                            },  

                },
                submitHandler: function(form) {
                    form.submit();
                }
            });

        }
    }

    $(D).ready(function($) {
            jQuery.validator.setDefaults({
                errorPlacement: function(error, element) {
                    if (element.hasClass("errorleft")) {
                       error.insertBefore(element);
                    }else{error.insertAfter(element);}
                }
            });


        VALIDATE.UTIL.setupFormValidation();
    });

})(jQuery, window, document);

ユーザーがフォーム内をジャンプできるサイドバーメニューもあります（これは複数ページのフォームで、各ページにはこのメニューにリンクがあります

<div id="leftmenu" class="leftmenu">
<ul id="sidebarmenu1">
<li><a href="?page=introduction">Page 1</a></li>
<li><a href="?page=introduction-2">Page 2</a></li>
<li><a href="?page=survey-2">I: Page 3</a></li>
</ul>
</div>

ユーザーがページの下部にある送信/続行ボタンを使用してページを終了すると、フォームは正常に検証されますが、これらのメニュー リンクをクリックしてページを離れようとしたときにもフォームを検証する必要があります。

これまでに試したこと: メニュー内のクリックがフォーム送信としてカウントされるように、このスクリプトを追加しました。

$('#leftmenu').click(function() {  
    $('#myform').submit();
});

また、これらのクリックが発生すると検証エラーが発生することがわかりますが、[続行] ボタンを介してフォームが送信された場合とは異なり、ブラウザはページを離れます。

jqueryバリデーターがこれらのリンクが機能しないようにするには、どうすればこれを調整できますか?

ありがとうございました。

4

1 に答える 1

2

これは、アンカー タグのデフォルト アクションが原因で発生しています。

フォームは送信されますが、デフォルトの動作のため、別のページにリダイレクトされます..

クリック イベントを に追加する代わりに#leftmenu、アンカーに追加し、デフォルト アクションを必ず停止してください。

$('#leftmenu a').on('click',function(e) {

    // Prevents the default action of
    // redirecting to the page specified.
    e.preventDefault();
    // Submit the form which will validate
    $('#myform').submit();
});
于 2012-09-29T02:13:52.360 に答える