jQuery的顯示/隱藏DIV

我展示形式後，加載信息提交這樣的：jQuery的顯示/隱藏DIV

<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 validation插件我的窗體：現在

$(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" 
      }, 

     } 
    }); 

});

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

如何解決這個問題？

來源

2014-10-09 Pink Code

而不是使用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(); 
     } 
    }); 

});

來源

2014-10-09 10:50:43

這工作和顯示加載，但在行動中不提交和不發送數據到服務器。點擊提交後，我只看到加載消息。 – 2014-10-09 10:56:14

表單提交是如何完成的...通過ajax或正常表單提交 – 2014-10-09 10:56:59

正常表單提交完成。 – 2014-10-09 10:57:38

的試試這個：使用.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" 
      }, 

     } 
    }); 

});

來源

2014-10-09 10:51:33

據我瞭解，你要顯示的element與id裝載當表單提交沒有錯誤。

The official documentation說：

回調處理實際當表單是有效的提交。獲取表單作爲唯一的參數。替換默認的提交。經過驗證後，通過Ajax提交表單的正確位置。

所以，你可以覆蓋submithandler像這樣：

你的HTML（只是表單元素，其餘可保持不變）：

<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" 
     }, 

    } 
});

希望它能讓你開始朝正確的方向發展。

來源

2014-10-09 11:06:02

jQuery的顯示/隱藏DIV

回答

相關問題