在 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; }

最后在视图中注册它：

@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>

Answer 2

我会从您的模型中删除 Terms，然后像这样在页面中添加一个复选框：

@using(Html.BeginForm()) {
...
<label>
    I agree to the terms & condition
    <input id="terms" type="checkbox" />
</label>
<button type="submit" id="btnSubmit" disabled="disabled" class="btn">Signup</button>
}

并将事件处理程序附加到更改事件以切换您的提交按钮。

$('#terms').change(function() {
    if($(this).is(':checked')) {
        $(this).siblings('button[type="submit"]').removeAttr('disabled');
    } else {
        $(this).siblings('button[type="submit"]').attr('disabled', 'disabled');
    }
});

Answer 3

你没有错过验证部分吗？

@Html.ValidationFor(m => m.Terms)

---

挂钩提交就是挂钩，要么是按钮点击，要么是表单提交：

$(".btn").bind("click", function() {
    // Button was clicked, do stuff here
    return true; // so it can process the form submit
});

和

$("form").bind("submit", function() {
    // Form was submitted, do stuff here
    return true; // so it can process the form submit to the server (return false if you dont want to submit)
});

您可以随时使用：

@using(Html.BeginForm("Action", "Controller", new { @id = "myForm" }, FormMethod.Post, null)) {
...
}

并与 Selector Id 挂钩

$("#myForm").bind("submit", function() { ... });

---

要将CheckBox 与Required 属性一起使用，您需要进行自定义验证，只需复制/粘贴Darin's code，以了解为什么[Required] 无法开箱即用您需要了解输出 HTML

jQuery Validation 中的 required validation 表示需要一个值，例如：

<input type="text" value="" id="myTextbox" />

但如果是复选框，则始终存在一个值

<input type="checkbox" value="Yes" id="myChackbox" checked="checked" />

和

<input type="checkbox" value="Yes" id="myChackbox" />

所以Required 总是正确的。

您只需要连接一个自定义事件，按照 Darin 的代码就可以开始了。