0

我在新的 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>&nbsp;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>

我还应该提到我正在遵循以下指南:

http://nickstips.wordpress.com/2011/08/18/asp-net-mvc-displaying-client-and-server-side-validation-using-qtip-tooltips/

为了尝试像验证一样获得悬停。除了登录表单外,这非常有效。经过进一步调查,代码似乎在 onError() 方法更改中出错,因为可能没有对此字段进行验证(我不需要对记住我进行验证,因为它是可选的)。

var replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;

我猜因为验证不需要我的输入,所以它没有 data-valmsg-replace 属性,因此这条线导致 javascript 失败,所以帖子通过了?

4

2 回答 2

2

The problem appeared to be because of the Remember Me checkbox not having any validation attributes applied. When the code got into the onError() method it was failing on this line:

var replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;

as container.attr("data-valmsg-replace") was an empty string.

I replaced this code with:

var elementJson = container.attr("data-valmsg-replace") || 'false';
var replace = $.parseJSON(elementJson) !== false;

and it all seems to work ok now. I'm not sure if that is the best way to write the javascript but seems to do the trick.

The original code as mentioned in the question was from:

MVC clientside and serverside using qTip

于 2013-11-14T22:01:01.173 回答
1

确保您的视图引用脚本:

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

这听起来很明显,但是对于创建视图对话框中的某些选项,即使您已Reference script libraries选中,它实际上也不会将脚本添加到视图中,因此值得仔细检查。

编辑

刚刚注意到您使用的是 MVC 4,在这种情况下,这可能是您在视图底部缺少的内容:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

如果没有捆绑脚本,我实际上能够重现验证不触发的问题。

于 2013-11-14T21:04:06.730 回答