Как требовать, чтобы флажок был отмечен на стороне клиента, прежде чем форма будет отправлена ​​на сервер в 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)) {
...
}

и соединиться с идентификатором селектора

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

---

Для использования CheckBox с атрибутом Required, вам нужно выполнить пользовательскую проверку, просто скопируйте / вставьте код Дарина , чтобы понять, почему [Required] не работает "из коробки", вам нужно понять выводHTML

обязательная проверка в jQuery Validation означает, что необходимо значение, например:

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

, но в случае флажка значение всегда есть

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

и

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

, поэтому Required всегда истинно.

Вам просто нужно подключить пользовательское событие, следовать коду Дарина, и вы готовы идти.