Question

我遇到了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>

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

Answer 1

可能是你的表单正在提交旧式的方式（不使用你在JS函数中提供的ajax提交）。

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

$(form).bind("submit",function(){
    if($(this).validate())
       {
           //submit
       }
     else
       {
            return false; 
       }
});

Answer 2

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

希望它有所帮助！

Answer 3

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

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

而不是TextBox

的常规HtmlHelper方法

Answer 4

jquery插件存在一个问题，它附带MVC处理html5输入类型。

从

获取最新消息

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

像魅力一样！：）

我不能快乐。：）

验证失败，但jQuery valid（）为true，$ .post执行

4 个答案: