使用 jquery.validate.unobtrusive.js 和 $("#form").submit() hijax 的 MVC3 不起作用

发布于 2024-12-13 02:57:09 字数 930 浏览 1 评论 0 原文

我有一个基本的表格

@Html.ValidationSummary(true)
using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form" }))
{
     <div class="editor-label">
         <label for="Name">@Html.LabelFor(model => model.Name)</label>
     </div>
     <div class="editor-field">
         @Html.EditorFor(model => model.Name)
     </div>

等等。我的模型正在使用数据注释并且验证已打开。

我使用一些 jquery 来劫持表单：

<script type="text/javascript">
    $("form[action='/']").submit(function () {
        $.post($(this).attr("action"), $(this).serialize(), function (response) {
            $("#contactForm").replaceWith($("#contactForm", response));
        });
        return false;
    });
</script>

如果我正确输入字段并提交，这将起作用。但奇怪的是，如果我在其中一个表单字段中输入无效值，并且验证代码会启动以突出显示我的错误，那么我在上面的 hijaxing 脚本中附加的提交事件函数就会丢失，并且会发生完整的帖子。

关于如何解决这个问题有什么好主意吗？

原文

I have a basic form

@Html.ValidationSummary(true)
using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @class = "form" }))
{
     <div class="editor-label">
         <label for="Name">@Html.LabelFor(model => model.Name)</label>
     </div>
     <div class="editor-field">
         @Html.EditorFor(model => model.Name)
     </div>

and so on. My Model is using data annotations and validation is turned on.

I'm hijaxing the form using some jquery:

<script type="text/javascript">
    $("form[action='/']").submit(function () {
        $.post($(this).attr("action"), $(this).serialize(), function (response) {
            $("#contactForm").replaceWith($("#contactForm", response));
        });
        return false;
    });
</script>

This works if I type the fields in correctly and submit. But the strange thing is if I enter an invalid value into one of the form fields and the validation code kicks in to highlight my mistake the submit event function I appended in the hijaxing script above is lost and a full post happens.

Any good ideas as to how I get around this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

江挽川 2024-12-20 02:57:09

我认为当您向表单添加提交处理程序时，您将覆盖 jquery 验证/数据注释添加的提交处理程序。

为了解决这个问题，您可以添加：

var theForm = $(this);
if ( theForm.valid() ) {
    $.post($(this).attr("action"), $(this).serialize(), function (response) {
        $("#contactForm").replaceWith($("#contactForm", response));
    });
    return false;
}

这将确保在进行 POST 之前表单有效。

I think when you add a submit handler to your form you are overwriting the submit handler that the jquery validation / data annotations adds.

To get around this you can add:

var theForm = $(this);
if ( theForm.valid() ) {
    $.post($(this).attr("action"), $(this).serialize(), function (response) {
        $("#contactForm").replaceWith($("#contactForm", response));
    });
    return false;
}

This will make sure the form is valid before making the POST.

回复收藏 0 原文

~没有更多了~