表單驗證后的jQuery顯示/隱藏div

Question

我在表單提交后顯示加載消息，如下所示：

<div id="loading" style="display:none;"><img class='image-widthauto' src="/img/Progressbar.gif" /></div>
<div id="content-alert"></div>
<form id="login" method="POST" action="" onsubmit="$('#loading').show();">
..... //input
</form>

我使用jquery驗證插件驗證我的表單：

$(document).ready(function () {
    $("#login").validate({
        errorElement: "div",
        errorPlacement: function(error, element) {
        error.appendTo("div#content-alert").addClass('alert alert-danger');
        }, 
        rules: {
            name: {
                required: true,
                minlength: 6,
                alpha: true,
            },
        },
        messages: {
            name: {
                required: "requied message",
                minlength: "6 character"
            },

        }
    });

});

現在，在表單提交中，我看到加載消息和驗證錯誤框（提交空表單值）。 當我的表單使用驗證插件沒有錯誤時，我需要顯示加載消息。

如何解決這個問題？

Answer 1

代替使用onsubmit屬性，使用驗證器的submitHandler回調

$(document).ready(function () {
    $("#login").validate({
        errorElement: "div",
        errorPlacement: function (error, element) {
            error.appendTo("div#content-alert").addClass('alert alert-danger');
        },
        rules: {
            name: {
                required: true,
                minlength: 6,
                alpha: true,
            },
        },
        messages: {
            name: {
                required: "requied message",
                minlength: "6 character"
            },

        },
        submitHandler: function (form) {
            $('#loading').show();
            form.submit();
        }
    });

});

Answer 2

試試看：使用.valid()方法決定是否顯示加載消息。

HTML：

<div id="loading" style="display:none;"><img class='image-widthauto' src="/img/Progressbar.gif" /></div>
<div id="content-alert"></div>
<form id="login" method="POST" action="" onsubmit="return showLoading();">
..... //input
</form>

jQuery的;

var form =  $("#login");

function showLoading()
{
  if(form.valid())
  {
   $('#loading').show();
   return true;
  }
  return false;
}

$(document).ready(function () {
    form.validate({
        errorElement: "div",
        errorPlacement: function(error, element) {
        error.appendTo("div#content-alert").addClass('alert alert-danger');
        }, 
        rules: {
            name: {
                required: true,
                minlength: 6,
                alpha: true,
            },
        },
        messages: {
            name: {
                required: "requied message",
                minlength: "6 character"
            },

        }
    });

});

Answer 3

據我了解，當表單提交時沒有錯誤，您想顯示具有id 加載的element 。

官方文件說：

表單有效時用於處理實際提交的回調。 獲取表單作為唯一參數。 替換默認的提交。 驗證后通過Ajax提交表單的正確位置。

因此，您可以像這樣覆蓋submithandler ：

您的html（只是form元素，其余的可以保持不變）：

 <form id="login" method="POST" action="#"> //Don't need the onsubmit here

您的JavaScript可能是：

 $("#login").validate({
    errorElement: "div",
    errorPlacement: function(error, element) {
    error.appendTo("div#content-alert").addClass('alert alert-danger');
    }, 
    submitHandler: function(form) {
      $('#loading').show();   //Show the required element here
      form.submit(); //Submit the form normally if needed
    },
    rules: {
        name: {
            required: true,
            minlength: 6,
            alpha: true,
        },
    },
    messages: {
        name: {
            required: "requied message",
            minlength: "6 character"
        },

    }
});

希望它能幫助您朝正確的方向開始。