jquery - 在 MVC 3 中，如何要求在表单提交到服务器之前在客户端检查复选框？

Question

我的注册页面上有一个条款和条件复选框。 我想在发布到服务器之前将其设置为必填字段，就像表单上的其他几个字段一样。 此验证必须在客户端完成。

有人知道如何正确执行吗？

我正在使用 MVC 3、jquery.validate.min.js 和 jquery.validate.unobtrusive.min.js

型号:

[Required(ErrorMessage = "terms and condition")]
[Display(Name = "terms")]
public bool Terms { get; set; }

查看:

@Html.CheckBoxFor(m => m.Terms, new { @class = "cb" }) Terms & Condition
<button type="submit" id="btnSubmit" class="btn">Signup</button>

此外， 单击提交按钮时是否可以调用/捕获某些 JS 函数？ 这样我就可以很方便的用jquery做验证然后提交了？

感谢您的阅读

Answer 1

您可以编写自定义验证属性:

public class MustBeTrueAttribute : ValidationAttribute, IClientValidatable
{
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        if (value is bool && (bool)value)
        {
            return ValidationResult.Success;
        }
        return new ValidationResult(String.Format(ErrorMessageString, validationContext.DisplayName));
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        var rule = new ModelClientValidationRule
        {
            ErrorMessage = FormatErrorMessage(metadata.GetDisplayName()),
            ValidationType = "shouldbetrue"
        };

        yield return rule;
    }
}

它将用于装饰您的模型:

[MustBeTrue(ErrorMessage = "terms and condition")]
[Display(Name = "terms")]
public bool Terms { get; set; }

最后在 View 中注册它:

@model MyViewModel

@using (Html.BeginForm())
{
    @Html.CheckBoxFor(m => m.Terms, new { @class = "cb" }) 
    <text>Terms &amp; Condition</text>
    @Html.ValidationMessageFor(x => x.Terms)

    <button type="submit" id="btnSubmit" class="btn">Signup</button>
}

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

<script type="text/javascript">
    jQuery.validator.addMethod('shouldbetruemethod', function (value, element) {
        return $(element).is(':checked');
    }, '');

    jQuery.validator.unobtrusive.adapters.addBool('shouldbetrue', 'shouldbetruemethod');
</script>