混合使用jQuery验证插件的asp mvc3不显眼的验证

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] [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 
} 

单选按钮似乎打破形式和劫持代码不再起作用，即当我点击提交，不要求是制作到服务器（在萤火虫控制台上观看），表格就消失了。再次，它只用普通的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'。例如，我需要2组验证消息--1个用于使用验证属性的服务器，另一个用于客户端视图。

Answer 1

jQuery.validator.addMethod("methodeName", function (value, element, params) { 
     if (somthing) { 
      return false; 
     } 
     return true; 
    }); 

    jQuery.validator.unobtrusive.adapters.addBool("methodeName"); 

和HTML添加两个属性

dal-val =真实dal-val-methodeName="errorMessage"

Answer 2

正如@Vadim的建议，我饰我的表单的星级控制与数据-VAL = “真” 的数据-val-required =“请输入你的评价”，如;

<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默认的'需要'验证程序会做的很好。这有点作品。但是，我第一次点击提交，我得到了我期待的确切结果;

如果我再选择一个等级，然后点击再次提交（不包括，比如说，输入电子邮件）的形式刚刚从视图“消失了”，我的控制器不打。

如果我用纯文本框替换单选按钮而不是接受评分;

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

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