Question

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

为实现这一目标，我认为可以采用两种不同的方法：

场景I：用户按下“提交”按钮后，将调用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" />

场景II：表单将使用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!.."
    });
});
/* ]]> */

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

如果表单在MVC4 Razor中有效，则调用Javascript方法

0 个答案: