我试图找到网上可用的信息,但无法将它连接在一起.我有一个使用登录页面的应用程序.现在我没有将视图绑定到任何模型.但是我有两个输入(用户名和密码).我想解雇
Asp.net Mvc附带的jquery不显眼的验证功能.以下是样本:
带有Twitter引导程序的骨干模板,它是登录模板(下划线模板引擎).
@using (@Html.BeginForm("Login","Home",FormMethod.Post,new { @class = "form-horizontal" })) { <div class="modal-body"> <div class="control-group"> <label class="control-label" for="inputEmail">Email</label> <div class="controls"> @*<input type="text" id="inputEmail" placeholder="Email">*@ @Html.TextBox("Email","",new { @placeholder = "Email" }) </div> </div> <div class="control-group"> <label class="control-label" for="inputPassword">Password</label> <div class="controls"> <input type="password" id="inputPassword" placeholder="Password"> </div> </div> <div class="control-group"> @*<div class="controls"> <label class="checkBox"> <input type="checkBox"> Remember me </label> <button type="submit" class="btn">Sign in</button> </div>*@ </div> </div> <div class="modal-footer"> @*<a class="btn" href="#" id="closeBtn">Close</a>*@ <button type="submit" class="btn btn-primary" >Login</button> </div> }
登录视图的Coffeescript
require ['backbone','bootstrap','jqValUnobtrusive'],(Backbone) -> class LoginView extends Backbone.View el:$("#content") initialize: -> @render() @validationoptions = @options.validationoptions validationoptions: rules: 'Email': required:true 'user[password]': required:true close:-> console.log "hello" render : -> $(@el).find("#login").html _.template $("#loginTemplate").html() App = new LoginView
我的控制器在没有浏览器的javascript的情况下将服务器端逻辑添加到验证规则
[HttpPost] [ValidateInput(true)] public ActionResult Login(FormCollection Form) { ViewBag.Message = "Method posted"; if (Form["Email"] == string.Empty) { ModelState.AddModelError("Email","Please Provide a Username"); ModelState.SetModelValue("Email",ValueProvider.GetValue("Email")); } return View(); }
有人能够对这个问题有所启发吗?如何使用此jquery不显眼的代码来显示twitter引导验证消息以显示错误?或者扩展jquery不显眼的验证插件以使用twitter bootstrap / backbone来执行验证?
我的标准是用户名和密码不应为NULL或空白.研究验证没有模型绑定的表单的简单案例(我不想将Login页面绑定到任何模型).而是通过扩展主干和twitter引导样式来连接jquery不显眼的插件!
解决方法
这是我使用mvc unobtrusive验证时用引导样式替换jquery错误消息的方法:
/* * Form Validation * This script will set Bootstrap error classes when form.submit is called. * The errors are produced by the MVC unobtrusive validation. */ $(function () { $('form').submit(function () { $(this).find('div.control-group').each(function () { if ($(this).find('span.field-validation-error').length == 0) { $(this).removeClass('error'); } }); if (!$(this).valid()) { $(this).find('div.control-group').each(function () { if ($(this).find('span.field-validation-error').length > 0) { $(this).addClass('error'); } }); } }); $('form').each(function () { $(this).find('div.control-group').each(function () { if ($(this).find('span.field-validation-error').length > 0) { $(this).addClass('error'); } }); }); }); var page = function () { //Update that validator $.validator.setDefaults({ highlight: function (element) { $(element).closest(".control-group").addClass("error"); },unhighlight: function (element) { $(element).closest(".control-group").removeClass("error"); } }); } (); /* End Form Validation */
这个问题的评论中有一些话题,但是这个脚本背后的技术是用Data Annotations(在我的登录案例中为[required])修饰的Asp.Net MVC viewmodel对象,它被传递给View并显示如下(只包括相关位,除非需要更多).
@using (Html.BeginForm()) { ... <div id="errors"></div> @Html.ValidationSummary(true,"Sign in was unsuccessful",new { @class = "alert alert-block alert-error" }) <div id="laatikko" class="well"> <div class="control-group"> <label for="kayttajaTunnus" class="control-label">@Kaannokset.Yhteiset.Sähköposti</label> <div class="controls"> @Html.TextBoxFor(m => m.kayttajaTunnus) @Html.ValidationMessageFor(m => m.kayttajaTunnus,null,new { @class = "help-inline" }) </div> </div> <div class="control-group"> <label for="salasana" class="control-label">@Kaannokset.Yhteiset.Salasana</label> <div class="controls"> @Html.PasswordFor(m => m.salasana) @Html.ValidationMessageFor(m => m.salasana,new { @class = "help-inline error" }) </div> </div> <input id="signIn" class="btn btn-primary" data-loading-text="Searching for user..." type="submit" value="Sign In" /> }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。