1

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

我删除脚本块一切正常。使用该脚本，电子邮件类型验证无法正常工作。我看到验证器在闪烁，但这并没有阻止帖子通过。

任何帮助表示赞赏！提前致谢！

我应该改用 $.Ajax 吗？

如果按钮类型为提交，则会出现更多验证闪烁

<div>
    <input id="btnsend" type="submit"  value="Send" />;
</div>

如果我将其更改为按钮，它不会闪烁或停止发布。

4

4 回答 4

1

可能是您的表单提交的是老式方式（不使用您在 JS 函数中的 ajax 提交）。

尝试将验证绑定到表单提交事件：

$(form).bind("submit",function(){
    if($(this).validate())
       {
           //submit
       }
     else
       {
            return false; 
       }
});
于 2012-05-15T03:21:53.017 回答
0

我从未使用过 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>

希望能帮助到你！

于 2012-05-15T03:43:00.573 回答
0

我认为您的问题可能出在您的文本框设置中。为了使用 jQuery Validate 插件，您需要具有某些数据属性，如果您使用，这些属性会自动设置：

@Html.TextBoxFor(m => m.Email, new { style = "width:400px", type = "email", placeholder = "Your email" })

而不是常规的TextBox方法HtmlHelper

于 2012-05-15T14:32:40.083 回答
0

与处理 html5 输入类型的 MVC 一起提供的 jquery 插件存在问题。

得到了最新的

https://github.com/jzaefferer/jquery-validation/downloads

奇迹般有效！！:)

我不能更快乐。:)

于 2012-05-16T02:40:59.260 回答