1

我有一个 MVC4 Razor 页面和 jQuery 验证方法。我想显示一个加载微调器，我可以在按下提交按钮时显示它。但是，如果表单无效，则微调器由于未正确检查表单的有效性而无法工作。

为了实现这一点，我认为可以使用两种不同的方法：

场景一：用户按下提交按钮后，调用 Spinner 方法。如果表单有效，将显示 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" />


场景二： Form 将与其他控件一样使用 jQuery 验证方法进行验证。在这种情况下，如果 Form 有效，将调用 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!.."
    });
});
/* ]]> */

如何通过使用这种方法之一正确应用它？

4

0 回答 0