验证失败,但 jQuery valid() 为 true,$.post 执行



我在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

就像一个魅力!! :)

我再高兴不过了。:)

最新更新