客户端验证不适用于 asp.net mvc 3 中的隐藏字段

发布于 2024-12-10 10:34:09 字数 769 浏览 0 评论 0原文

我有一个隐藏字段,其验证如下所示

@Html.HiddenFor(m => m.Rating)
@Html.ValidationMessageFor(m => m.Rating)

Rating 属性应用了 Range 验证器属性,范围为 1-5。它被放置在带有提交按钮的表单内。

然后我得到了以下 jquery,它在某些用户事件的隐藏字段中设置值(基本上用户单击一些星星来评分)

$(".star").click(function(){
    $("#Rating").val(2);
});

现在,如果我提交表单而没有设置隐藏字段的用户事件,则验证有效。错误消息正确显示并且它在所有客户端都有效。

现在,在这种情况下,如果我单击星星,则会调用上面的 javascript 设置隐藏字段,验证错误消息不会消失。我可以在隐藏变量具有一些有效值后提交表单。但我希望客户端验证应该有效。 (当隐藏变量设置了一些有效值时,验证错误应该消失)

最初我认为,jquery 验证会在一些特殊事件上调用,所以我尝试自己引发 click、change、keyup、blur 和 focusout 事件但这

$(".star").click(function(){
    $("#Rating").val(2);
    $("#Rating").change();
});

仍然不起作用。错误消息一旦出现,就根本不会消失。

I have got a hidden field with a validation for it as below

@Html.HiddenFor(m => m.Rating)
@Html.ValidationMessageFor(m => m.Rating)

The Rating property has Range validator attribute applied with range being 1-5. This is put inside a form with a submit button.

I have then got following jquery that sets the value in hidden field on some user event (Basically user clicks on some stars to rate)

$(".star").click(function(){
    $("#Rating").val(2);
});

Now if I submit the form without the user event that sets the hidden field, the validation works. The error messages is displayed properly and it works all client side.

Now, in this situation, if I click on stars, that invokes the above javascript a sets the hidden field, the validation error message would not go away. I can submit the form after the hidden variable has some valid value. But I'm expecting that the client side validation should work. (When the hidden variable has been set with some valid value, the validation error should go away)

Initially I thought, the jquery validation would be invoked on some special events so I tried raising click, change, keyup, blur and focusout events myself as below

$(".star").click(function(){
    $("#Rating").val(2);
    $("#Rating").change();
});

But this is still not working. The error messages once appeared, does not go away at all.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(5

又怨 2024-12-17 10:34:09

您可以使用 div 包裹隐藏字段,该 div 放置在某处但仍在

内。添加css将其踢到外太空。

<div style="position:absolute; top:-9999px; left:-9999px">
<input id="Rating" type="hidden" name="rating" >
</div>

然后将以下标签添加到要显示错误的位置:

<label for="rating" class="error" style="display:none">I am an an error message, please modify me.</label>

You can wrap your hidden field with a div put somewhere but still inside the <form>. Add css to kick it to outer space.

<div style="position:absolute; top:-9999px; left:-9999px">
<input id="Rating" type="hidden" name="rating" >
</div>

Then add the following label to where you want to show the error:

<label for="rating" class="error" style="display:none">I am an an error message, please modify me.</label>
家住魔仙堡 2024-12-17 10:34:09

客户端验证忽略隐藏字段。您可以动态设置“忽略”选项,但为了使其正常工作,我直接在 .js 文件中执行了以下操作。

现在这应该可以解决问题。

在我的 aspx 中...

<%: Html.HiddenFor(model => model.age, new { @class="formValidator" }) %>

在 jquery.validate.js 中

ignore: ":hidden:not('.formValidator')",

Client-side validation ignores hidden fields. You can set the "ignore" option dynamically but just to get it to work I did the following directlyl in the .js file.

For now this should do the trick.

In my aspx...

<%: Html.HiddenFor(model => model.age, new { @class="formValidator" }) %>

In jquery.validate.js

ignore: ":hidden:not('.formValidator')",
孤星 2024-12-17 10:34:09

事实证明这是一个非常有趣的问题。默认的“忽略”设置是忽略隐藏字段。该字段隐藏在 jQuery ui 插件中。我只是将一个名为“includeCheckBox”的类添加到我想要验证的渲染输入中,并将以下代码行放入...

var validator = $('#formMyPita').validate();
validator.settings.ignore = ':hidden:not(".includeCheckBox")';
if ($('#formMyPita').valid()) {....

This turned out to be a very interesting issue. the default "ignore" setting is ignores hidden fields. The field was hidden in a jQuery ui plug-in. I simply added a class called "includeCheckBox" to the rendered input I wanted to validate and put the following line of code in...

var validator = $('#formMyPita').validate();
validator.settings.ignore = ':hidden:not(".includeCheckBox")';
if ($('#formMyPita').valid()) {....
那一片橙海, 2024-12-17 10:34:09

在设置隐藏字段值的代码中,手动调用表单验证,如下所示:

$("form").validate().form();

In the code which sets the hidden field's value, manually invoke validation for the form, like so:

$("form").validate().form();
锦爱 2024-12-17 10:34:09

我认为这是因为隐藏输入不会触发任何这些事件。

您可以做的是使用 而不是隐藏字段;

@html.TextBoxFor(m => m.Rating, new {display = "display:none"})

I think it is because hidden inputs don't fire any of these events.

What you could do instead would be to use a <input type="text" style="display:none" /> instead of the hidden field;

@html.TextBoxFor(m => m.Rating, new {display = "display:none"})
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文