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

回答

相关问题