[英]Mixing asp mvc3 unobtrusive validation with jquery validation plugin
对于 asp mvc3 客户端验证,是否可以将默认的、开箱即用的不显眼样式与 jquery 验证插件混合使用?
这是视图中的表单:
@using (Html.BeginForm("", "", FormMethod.Post, new { id = "newRatingForm" }))
{
@Html.ValidationSummary(true)
<fieldset>
<legend>Rating</legend>
<div class="editor-label">
@Html.LabelFor(model => model.Rate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Rate)
@Html.ValidationMessageFor(model => model.Rate)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Email)
@Html.ValidationMessageFor(model => model.Email)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
默认情况下,使用 model 属性上的常用验证属性,Unobtusive 效果很好。 目标是用 [fyneworks][1] jquery 星级插件替换表单中的“model.Rate”位,并仅针对表单的该部分使用 jquery 验证插件:
<span>Your Rating:</span>
<div id="ratingStars">
<input class="star {split:2}" type="radio" name="Rating" value="0.5"/>
<input class="star {split:2}" type="radio" name="Rating" value="1.0"/>
<input class="star {split:2}" type="radio" name="Rating" value="1.5"/>
<input class="star {split:2}" type="radio" name="Rating" value="2.0"/>
<input class="star {split:2}" type="radio" name="Rating" value="2.5"/>
<input class="star {split:2}" type="radio" name="Rating" value="3.0"/>
<input class="star {split:2}" type="radio" name="Rating" value="3.5"/>
<input class="star {split:2}" type="radio" name="Rating" value="4.0"/>
<input class="star {split:2}" type="radio" name="Rating" value="4.5"/>
<input class="star {split:2}" type="radio" name="Rating" value="5.0"/>
</div>
我劫持了表单的提交操作并将表单值转换为 Json 以执行 ajax 请求:
$("#newRatingForm").submit(function (event) {
event.preventDefault();
if ($(this).valid()) {
newRatingSubmit();
}
});
function newRatingSubmit() {
//jquery ajax request using form values converted to Json
}
单选按钮似乎破坏了表单,劫持代码不再起作用,即当我单击提交时,没有向服务器发出请求(在 firebug 控制台上观看),表单就消失了。 同样,只需简单的 mvc3 形式就可以正常工作。
我尝试为评级单选按钮添加 jquery 验证规则,但似乎没有任何区别:
$("#newRatingForm").validate({
meta: "validate",
errorLabelContainer: "#ErrorDiv",
wrapper: "div",
rules:
{
Rating: {
required: true
}
},
messages:
{
Rating: {
required: 'A Rating required.'
}
},
onfocusout: false,
onkeyup: false,
//handle validation ok, POST submit
submitHandler: function (label) {
newRatingSubmit();
}
});
作为替代方案,我可以使用 jquery 验证插件使用星级插件验证标准 html 表单,并使用上述代码提交,但这似乎不是'asp.net mvc'。 例如,我需要两组验证消息——一组用于使用验证属性的服务器,另一组用于客户端视图。
jQuery.validator.addMethod("methodeName", function (value, element, params) {
if (somthing) {
return false;
}
return true;
});
jQuery.validator.unobtrusive.adapters.addBool("methodeName");
并在 html 添加 2 个属性
dal-val
= true 和dal-val-methodeName="errorMessage"
正如@Vadim 所建议的那样,我用 data-val="true" data-val-required="Please enter your rating" 装饰了我的表单的星级控件,如下所示;
<div id="ratingStars">
<input class="star {split:2}" type="radio" name="Rating" value="0.5" data-val="true" data-val-required="Please enter your rating"/>
<input class="star {split:2}" type="radio" name="Rating" value="1.0" data-val="true"data-val-required="Please enter your rating"/>
<input class="star {split:2}" type="radio" name="Rating" value="1.5" data-val="true" data-val-required="Please enter your rating"/>
<input class="star {split:2}" type="radio" name="Rating" value="2.0" data-val="true" data-val-required="Please enter your rating"/>
<input class="star {split:2}" type="radio" name="Rating" value="2.5" data-val="true" data-val-required="Please enter your rating"/>
<input class="star {split:2}" type="radio" name="Rating" value="3.0" data-val="true" data-val-required="Please enter your rating"/>
<input class="star {split:2}" type="radio" name="Rating" value="3.5" data-val="true" data-val-required="Please enter your rating"/>
<input class="star {split:2}" type="radio" name="Rating" value="4.0" data-val="true" data-val-required="Please enter your rating"/>
<input class="star {split:2}" type="radio" name="Rating" value="4.5" data-val="true" data-val-required="Please enter your rating"/>
<input class="star {split:2}" type="radio" name="Rating" value="5.0" data-val="true" data-val-required="Please enter your rating"/>
</div>
<span data-valmsg-replace="true" data-valmsg-for="Rating" class="field-validation-valid" style="display:block; width:80px"></span>
我不需要自定义验证器,我认为 jquery 默认的“必需”验证器就可以了。 这有点工作。 但是,第一次单击提交时,我得到了我希望的确切结果;
如果然后我对 select 进行评级并再次单击提交(例如,不输入电子邮件),表单就会从视图中“消失”,并且我的 controller 没有被击中。
如果我用纯文本框替换单选按钮来接受评级;
<input type="text" name="Rating" id="Rating" data-val-required="Please enter your rating" data-val="true" class="text-box single-line"/>
它工作得很好,当我点击提交时,我的 controller 被击中。 不幸的是,文本框对评级没有好处。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.