javascript - MVC4 Razor でフォームが有効な場合は Javascript メソッドを呼び出す

Question

MVC4 Razor ページと jQuery 検証メソッドがあります。読み込みスピナーを表示したいのですが、送信ボタンを押すと表示できます。ただし、フォームが有効でない場合、フォームの有効性が適切にチェックされないため、スピナーは機能しません。

これを達成するには、2 つの異なるアプローチを使用できると思います。

シナリオ I:ユーザーが [送信] ボタンを押すと、Spinner メソッドが呼び出されます。フォームが有効な場合、スピナーが表示され、フォームが送信されます。そうでない場合、スピナーは表示されず、フォームは送信されません。ユーザーがフォームを検証して送信ボタンを押すと、最初の段階として機能します。

<script type="text/javascript">
$(function () {
    $("#submitbtn").click(function () {
        if ($('#myform').valid()) { //If there is no validation error
            //Show "Loading..." spinner 
            $("#loading").fadeIn();
            var opts = {
                lines: 12, // The number of lines to draw
                length: 7, // The length of each line
                width: 4, // The line thickness
                radius: 10, // The radius of the inner circle
                color: '#000', // #rgb or #rrggbb
                speed: 1, // Rounds per second
                trail: 60, // Afterglow percentage
                shadow: false, // Whether to render a shadow
                hwaccel: false // Whether to use hardware acceleration
            };
            var target = document.getElementById('loading');
            var spinner = new Spinner(opts).spin(target);
        }
    });
});

<input id="submitbtn" type="submit" value="Send" />

シナリオ II:フォームは、他のコントロールとして jQuery 検証メソッドを使用して検証されます。その場合、フォームが有効であれば、showSpinner() メソッドが呼び出されます。そうでない場合、フォームは送信されず、showSpinner() は呼び出されません。ここでは、上記のようなメソッドと jQuery 検証メソッドを少しだけ変更します。

<script type="text/javascript">
    function showSpinner() {
        //if ($('#myform').valid()) { //As the Form is checked already, there is no need to check again.

            //Show "Loading..." spinner if all the components on the Form are valid
            $("#loading").fadeIn();
            var opts = {
                lines: 12, // The number of lines to draw
                length: 7, // The length of each line
                width: 4, // The line thickness
                radius: 10, // The radius of the inner circle
                color: '#000', // #rgb or #rrggbb
                speed: 1, // Rounds per second
                trail: 60, // Afterglow percentage
                shadow: false, // Whether to render a shadow
                hwaccel: false // Whether to use hardware acceleration
            };
            var target = document.getElementById('loading');
            var spinner = new Spinner(opts).spin(target);
        //}
    }

<script type="text/javascript">
/* <![CDATA[ */
jQuery(function () {
    //...
    jQuery("#myform").validate({
        expression: "if (VAL) {showSpinner(); return true;} else {return false;}",
        message: "Form is not valid!.."
    });
});
/* ]]> */

このアプローチのいずれかを使用して、これを適切に適用するにはどうすればよいですか?