jquery - 送信なしのフォーム検証

Question

クライアント側のフィールド検証用に DataAnnotations を使用して、.NET MVC 3 を使用しています。フォーム送信ではすべて正常に機能しますが、フォームが長く、投稿前にセクションの div を表示および非表示にするために [次へ] ボタンを使用しています。

フォームを検証してから、フォームを送信せずに div を変更したいと思います。次のさまざまなバリエーションを試しましたが、フォームは常に送信されています。

$('#btnNext').click(function (e) {
    if ($('form').valid()) {
        $('#div1').hide();
        $('#div2').show();
        return false;   
    }
    //return false;
});

どんな助けでも大歓迎です。ありがとう

Answer 1

preventDefault を使用して、フォームの送信を停止します。

$('#btnNext').click(function (e) {
    e.preventDefault();
    if ($('form').valid()) {
        $('#div1').hide();
        $('#div2').show();
        return false;   
    }
    //return false;
});

Answer 2

e.preventDefault();イベントが正常に動作するように行を追加します。

$('#btnNext').click(function (e) {
    e.preventDefault();
    if ($('form').valid()) {
        $('#div1').hide();
        $('#div2').show();
        return false;   
    }
    //return false;
});