我在jQuery验证和帖子方面遇到了问题。我正在使用MVC 4,但这无关紧要。我已经完成了视图源代码,并且设置了所有正确的HTML 5属性。
以下是我如何使用jQuery做文章:
<script type="text/javascript">
$(document).ready(function () {
$('#btnsend').click(function (e) {
if ($("#sendForm").validate().form()) {
var contact = {
Name: $('#Name').val(),
Email: $('#Email').val(),
Message: $('#Message').val()
};
$.post('/Contact/Send', contact, function () {
$('#cSet').fadeOut(1000, "", function () {
$('#success').delay(1000).fadeIn(1000, "", function () {
$('#success').html("<h2>The message is sent. Thank you!</h2>");
});
});
});
}
else {
return false;
}
//return false;
});
});
</script>
这是电子邮件文本框的div中的代码:
<div>
@Html.TextBox("Email", null, new { @style = "width:400px", @Type = "email", @placeholder="Your email" })
@Html.ValidationMessageFor(m => m.Email)
</div>
我删除了脚本块,一切正常。使用该脚本时,电子邮件类型验证无法正常工作。我看到验证器闪烁,但这并不能阻止帖子通过。
任何帮助不胜感激!提前感谢!
我应该只使用 $ 吗?阿贾克斯呢?
下面是更多,如果按钮类型为提交,则会发生验证闪烁
<div>
<input id="btnsend" type="submit" value="Send" />;
</div>
如果我将其更改为按钮,它不会闪烁或停止发布。
可能是您的表单以老式的方式提交(不使用您在 JS 函数中的 ajax 提交)。
尝试将验证绑定到表单提交事件:
$(form).bind("submit",function(){
if($(this).validate())
{
//submit
}
else
{
return false;
}
});
我从未使用过 JQuery 验证插件,但在 http://docs.jquery.com/Plugins/Validation/Validator/form 阅读 form() 方法文档:
验证表单,如果表单有效则返回 true,否则返回 false。这表现为正常的提交事件,但返回结果。
似乎 form() 方法正在触发提交事件并导致帖子。也许尝试:
<script type="text/javascript">
$(document).ready(function () {
$('#btnsend').click(function (e) {
if ($("#sendForm").validate()) {
var contact = {
Name: $('#Name').val(),
Email: $('#Email').val(),
Message: $('#Message').val()
};
$.post('/Contact/Send', contact, function () {
$('#cSet').fadeOut(1000, "", function () {
$('#success').delay(1000).fadeIn(1000, "", function () {
$('#success').html("<h2>The message is sent. Thank you!</h2>");
});
});
});
}
else {
return false;
}
});
});
</script>
希望对您有所帮助!
您的问题可能出在您的文本框设置中。为了使用 jQuery Validate 插件,您需要具有某些数据属性,如果您使用:
@Html.TextBoxFor(m => m.Email, new { style = "width:400px", type = "email", placeholder = "Your email" })
而不是HtmlHelper
的常规TextBox
方法
jquery 插件存在一个问题,它随 MVC 一起处理 html5 输入类型。
从以下位置获取最新消息
https://github.com/jzaefferer/jquery-validation/downloads
就像一个魅力!! :)
我再高兴不过了。:)