将asp mvc3非侵入式验证与jquery验证插件混合使用

Question

对于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>
}

Unobtusive在默认情况下工作得很好，在模型的属性上使用通常的验证属性。我们的目标是用fyneworks 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();
    }
 });

作为另一种选择，我可以使用星级插件验证一个标准的html表单，使用jquery验证插件，然后用上面的代码提交，但这看起来不是很'asp.net mvc‘。例如，我需要两组验证消息-一组用于使用验证属性的服务器，另一组用于客户端视图。

Answer 1

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"

Answer 2

根据@Vadim的建议，我用data-val="true“data-val-required=”true 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默认的“必需”验证器就可以了。这挺管用的。然而，当我第一次点击submit时，我得到了我所希望的确切结果；

​

​

如果我选择了一个评分，然后再次点击提交(比如说，没有输入电子邮件)，表单就会从视图中“消失”，我的控制器也不会被点击。

如果我将单选按钮替换为纯文本框以接受评级；

<input type="text" name="Rating" id="Rating" data-val-required="Please enter your rating" data-val="true" class="text-box single-line"/>

它工作得很好，当我点击提交时，我的控制器就会被点击。不幸的是，文本框对评分没有好处。