我在新的 MVC4 解决方案中使用 jquery 不显眼的验证。我的问题是,在我的登录页面上,当我单击提交按钮时,即使我的必填字段为空,该页面仍会发布。
我有另一个页面,我有相同的设置,但没有发布。
这是我的登录页面:
<div id="loginForm">
@Html.SiteLogo()
@using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<div id="loginForm-container" class="spacer-below">
<fieldset>
<legend>Log in Form</legend>
<div class="input-control text" data-role="input-control">
@Html.TextBoxFor(m => m.UserName, new { placeholder="Please enter your username"})
@Html.ValidationMessageFor(m => m.UserName)
</div>
<div class="input-control password" data-role="input-control">
@Html.PasswordFor(m => m.Password, new { placeholder="Please enter your password"})
@Html.ValidationMessageFor(m => m.Password)
</div>
<div class="input-control checkbox" data-role="input-control">
<label>
@Html.CheckBoxFor(m => m.RememberMe)
<span class="check"></span> Remember me
</label>
</div>
<div class="input-control">
<input type="submit" class="primary small" value="Log in" />
</div>
</fieldset>
</div>
<div class="forgotPassword">@Html.ActionLink("Forgotten password?", "ForgotPassword")</div>
<span>@Html.Partial("_CustomerSupport")</span>
}
</div>
这个页面的视图模型:
public class LoginModel
{
[Required]
[Display(Name = "User name")]
public string UserName { get; set; }
[Required]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password { get; set; }
[Display(Name = "Remember me")]
public bool RememberMe { get; set; }
}
这是一个页面的HTMl,如果输入为空,则不会发布
<div id="resetPasswordForm">
@Html.SiteLogo()
<h4>Reset Password</h4>
@using (Html.BeginForm(new {ReturnUrl = ViewBag.ReturnUrl}))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
@Html.HiddenFor(vm => vm.Authentication.Token)
@Html.ValidationMessageFor(vm => vm.Authentication.Token)
<div id="resetPasswordForm-container" class="spacer-below">
<fieldset>
<legend>Reset password form</legend>
<div class="input-control text" data-role="input-control">
@Html.TextBoxFor(vm => vm.Authentication.EmailAddress, new { placeholder="Please enter your email address"})
@Html.ValidationMessageFor(vm => vm.Authentication.EmailAddress)
</div>
<div class="input-control password" data-role="input-control">
@Html.PasswordFor(vm => vm.NewPassword, new { placeholder="Please enter a new password"})
@Html.ValidationMessageFor(vm => vm.NewPassword)
</div>
<div class="input-control text" data-role="input-control">
@Html.PasswordFor(vm => vm.ConfirmPassword, new { placeholder="Please enter the password again"})
@Html.ValidationMessageFor(vm => vm.ConfirmPassword)
</div>
<div class="input-control">
<input type="submit" class="primary medium" value="Reset Password" />
</div>
</fieldset>
</div>
<span>@Html.Partial("_CustomerSupport")</span>
}
</div>
我的这个页面的视图模型:
public class ResetPasswordViewModel
{
public ResetPasswordViewModel()
{
Authentication = new ResetPasswordConfirmViewModel();
}
public ResetPasswordConfirmViewModel Authentication { get; set; }
[Required]
[StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
[DataType(DataType.Password)]
[Display(Name = "New password")]
public string NewPassword { get; set; }
[DataType(DataType.Password)]
[Display(Name = "Confirm new password")]
[Compare("NewPassword", ErrorMessage = "The new passwords do not match, please enter again.")]
public string ConfirmPassword { get; set; }
}
当我查看源代码时,我的视图引用了相应的脚本:
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
我还应该提到我正在遵循以下指南:
为了尝试像验证一样获得悬停。除了登录表单外,这非常有效。经过进一步调查,代码似乎在 onError() 方法更改中出错,因为可能没有对此字段进行验证(我不需要对记住我进行验证,因为它是可选的)。
var replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;
我猜因为验证不需要我的输入,所以它没有 data-valmsg-replace 属性,因此这条线导致 javascript 失败,所以帖子通过了?