jQuery对话框部分表单提交验证(jQuery dialog partial form submit validation)

jQuery对话框部分表单提交验证(jQuery dialog partial form submit validation)

我有以下部分视图（我删除了一些格式只是为了在这个论坛上保持简单）。 我的表单标记位于父页面上，对话框中的项目是该表单的一部分。 这是一种强类型的局部视图。 我在我的模型中将密码和confirmPassword字段定义为[必需]。

@Html.LabelFor(m => m.password) <a href="#" onclick="openResetPasswordDialog();">Reset Password</a> <div id="dialogResetPassword" title="Reset Password"> <p>Reset password for user: @Model.userId</p> @Html.LabelFor(m => m.password) @Html.PasswordFor(m => m.password) @Html.ValidationMessageFor(m => m.password) <div class="rowEnd"></div> @Html.LabelFor(m => m.confirmPassword) @Html.PasswordFor(m => m.confirmPassword) @Html.ValidationMessageFor(m => m.confirmPassword) <div class="rowEnd"></div> </div>

我有以下javascript用于初始化对话框：

function initializeResetPasswordDialog() { $(resetPasswordDialogId).dialog( { autoOpen: false, autoResize: true, buttons: { Ok: function () { if (!($('#userForm').valid())) { return false; } //more code goes here ... closeResetPasswordDialog(); }, Cancel: function () { closeResetPasswordDialog(); } } }); }

我的对话框初始化，打开和关闭很好，但是当我尝试检查对话框中项目的有效性时，我总是“有效”。

我不想提交整个表单，只需在“确定”按钮上提交密码和确认密码字段，然后激活我的验证。 有关如何做到这一点的任何建议？

I have the following partial view (I have removed some of the formatting just to keep it simple on this forum). My form tag is on the parent page, and the items on the dialog are a part of that form. This is a strongly typed partial view. I have defined the password and confirmPassword fields as [Required] in my Model.

@Html.LabelFor(m => m.password) <a href="#" onclick="openResetPasswordDialog();">Reset Password</a> <div id="dialogResetPassword" title="Reset Password"> <p>Reset password for user: @Model.userId</p> @Html.LabelFor(m => m.password) @Html.PasswordFor(m => m.password) @Html.ValidationMessageFor(m => m.password) <div class="rowEnd"></div> @Html.LabelFor(m => m.confirmPassword) @Html.PasswordFor(m => m.confirmPassword) @Html.ValidationMessageFor(m => m.confirmPassword) <div class="rowEnd"></div> </div>

I have the following javascript for the initialization of the dialog:

function initializeResetPasswordDialog() { $(resetPasswordDialogId).dialog( { autoOpen: false, autoResize: true, buttons: { Ok: function () { if (!($('#userForm').valid())) { return false; } //more code goes here ... closeResetPasswordDialog(); }, Cancel: function () { closeResetPasswordDialog(); } } }); }

My dialog initializes, opens and closes fine, but when I try to check the validity of the items in the dialog, I always get "valid".

I do not want to submit the entire form, but just submit the password and the confirm password fields on the Ok button, and also fire up my validations. Any suggestions on how to do this?

最满意答案

好的，所以我通过将以下函数添加到jQuery对话框的open参数来解决它：

open: function () { $(this).parent().appendTo("#userForm"); }

我注意到在初始化jQuery对话框时，即使它在我的表单中，当在浏览器中呈现HTML页面时，对话框div也被移动到表单之外。 要使验证有效，输入必须在表单内。

我希望这篇文章能帮助其他人！

Ok, so I solved it by adding the following function to the open parameter for the jQuery dialog:

open: function () { $(this).parent().appendTo("#userForm"); }

I noticed that when initializing a jQuery dialog, even though it was within my form, when the HTML page rendered in the browser, the dialog div was moved outside the form. For the validations to work, the inputs must be within a form.

I hope this post helps other people too!