C＃bool和bool？ jQuery验证问题

Question

这里有两个问题，都是相关的。

第一个问题涉及在.NET MVC中使用[Required] bool?和jQuery Validate，其中不阻止表单在没有值的情况下发布，当用户将切换到中间null位置时也不会显示警告消息（True /空/ FALSE）。

第二个问题涉及使用[BooleanRequired] bool以及在.NET MVC中使用CheckBoxFor和jQuery Validate，因为在某些情况下CheckBox实际上会消失。例如在Chrome中，如果您在不勾选条款复选框的情况下发布表单，则删除:: before状态，因此CheckBox消失，但在IE11中不会发生这种情况，但是在显示警告后取消勾选CheckBox会导致CheckBox消失。

以下代码的代码如下：

HomeController.cs

public ActionResult Test()
{
    return View();
}

[HttpPost]
public ActionResult Test(Test test)
{
    if (ModelState.IsValid)
    {
        //return Redirect("/thank-you");
    }

    return View(test);
}

Test.cshtml

<section class="content container">
    <article class="content content__full">
        @Html.Partial("_TestForm")
    </article>
</section>

_TestForm.cshtml

@using WebAppliation1.Helpers
@model WebAppliation1.Models.Test

@using (Html.BeginForm("Test", "Home", FormMethod.Post, new { id = "TestForm", @class = "test-form" }))
{
    @Html.ValidationSummary()
    <div id="QuestionDiv">
        <label>Are you a badger?</label>
        @Html.HiddenForExt(model => model.Question, new Dictionary<string, object> { { "required", "required" } })
    </div>

    <footer>
        @Html.CheckBoxFor(model => model.Terms, new Dictionary<string, object> { { "required", "required" } })
        @Html.LabelFor(model => model.Terms)
        <a href="/terms-and-conditions" target='_Blank'>Terms and Conditions</a>
        @Html.ValidationMessageFor(model => model.Terms)
        <input type="submit" value="Submit" class="btn" />
    </footer>
}
@Scripts.Render("~/Scripts/jqueryNouisliderAll")
@Scripts.Render("~/Scripts/test")

test.js

$(document).ready(function () {
    var question = $("#Question").val();

    question = question === "" ? "1" : question === "True" ? "0" : "2";

    $("#QuestionDiv").toggle({
        selectorName: "QuestionDiv",
        displaySelectedValue: false,
        start: question
    });

    $("#QuestionDiv").on("change", function () {
        question = this.value;

        question = question === "1" ? null : question === "0" ? "True" : "False";

        $("#Question").val(question);
    });
});


$.validator.messages.required = function (param, input) {
    return $(input).data("val-required");
}

$.validator.addMethod("notEqual", function (value, element, param) {
    return this.optional(element) || value !== param;
}, "Please specify a different (non-default) value");

$("#TestForm").validate({
    rules: {
        Question: {
            notEqual: null
        },
        //Question: {
        //    //minlength: 4,
        //    //required: true
        //    required: function(element) {//        
        //        return $("#QuestionDiv").value !== 1;
        //    }
        //},
        Terms: {
            required: true
        }
    },
    messages: {
        Terms: {
            required: "You must accept the terms and conditions"
        },
        Question: {
            minlength: "Please select either Yes or No",
            required: "The Question field is required"
        }
    },
    errorPlacement: function (error, element) {
        var text = error.text();

        if (text.indexOf("required") !== -1) {
            element.attr("placeholder", error.text());
        } else {
            error.insertAfter(element);
        }
    },
    highlight: function (element) {
        if ($(element).is("select")) {
            $(element.form).find("select[id=" + element.id + "]").parent().find("span").addClass("error").removeClass("valid");
        } else {
            $(element).addClass("error").removeClass("valid");
        }
    },
    unhighlight: function (element) {
        if ($(element).is("select")) {
            $(element.form).find("select[id=" + element.id + "]").parent().find("span").addClass("valid").removeClass("error");
        } else {
            $(element).addClass("valid").removeClass("error");

            var label = $("label[for='" + element.id + "']").text();

            $(element).prop("placeholder", label);
        }
    },
    focusInvalid: true
});

(function ($) {
    var pluginName = "toggle";

    function plugin(element, options) {
        var toggle = null;

        var leftLabel = null;

        var rightLabel = null;

        var $el = $(element);

        var $toggle = null;

        var $leftLabel = null;

        var $rightLabel = null;

        options = $.extend({}, $.fn[pluginName].defaults, options);

        function render() {
            $el.append("<span class='toggle-slider__option toggle-slider__option-left'>" + options.leftLabelText + "</span>");

            $el.append("<div class='toggle-slider'></div>");

            $el.append("<span class='toggle-slider__option toggle-slider__option-right'>" + options.rightLabelText + "</span>");

            var type = "hidden";

            if (options.displaySelectedValue) {
                type = "text";
            }

            $el.append("<input id='" + options.selectorName + "' name='" + options.selectorName + "' class='toggle-slider-display' type='" + type + "' value='" + options.start + "'></input>");

            toggle = $el.children(".toggle-slider");

            leftLabel = $el.children(".toggle-slider__option-left");

            rightLabel = $el.children(".toggle-slider__option-right");

            $toggle = $(toggle);

            $leftLabel = $(leftLabel);

            $rightLabel = $(rightLabel);
        }

        function configure() {
            $toggle.noUiSlider({
                range: {
                    'min': options.minVal,
                    'max': options.maxVal
                },
                format: options.format,
                start: options.start
            });
        }

        function toggleVal(value) {
            $("#" + options.selectorName).val(value);

            $leftLabel.removeClass("left");

            $rightLabel.removeClass("right");

            $toggle.removeClass("left");

            $toggle.removeClass("right");

            $toggle.removeClass("off");

            switch (value) {
                case "0":
                    $leftLabel.addClass("left");
                    $toggle.addClass("left");
                    break;
                case "2":
                    $rightLabel.addClass("right");
                    $toggle.addClass("right");
                    break;
                default:
                    $toggle.addClass("off");
            }
        }

        function bind() {
            $leftLabel.click(function () {
                $toggle.val(0);
            });

            $rightLabel.click(function () {
                $toggle.val(2);
            });

            $toggle.Link().to(toggleVal);
        }

        function init() {
            render();
            configure();
            bind();
        }

        function destroy() {
            $el.each(function () {
                var $el = $(this);

                hook("onDestroy");

                $el.removeData("plugin_" + pluginName);
            });
        }

        init();

        return {
            destroy: destroy
        };
    }

    $.fn[pluginName] = function (options) {
        if (typeof options === "object" || !options) {
            return this.each(function () {
                if (!$.data(this, "plugin_" + pluginName)) {
                    $.data(this, "plugin_" + pluginName, new plugin(this, options));
                }
            });
        }
    };

    $.fn[pluginName].defaults = {
        onInit: function () { },
        onDestroy: function () { },
        step: 1,
        minVal: [0, 1, 2],
        maxVal: 2,
        displaySelectedValue: true,
        start: 1,
        selectorName: pluginName + "Selector",
        format: wNumb({
            decimals: 0
        }),
        leftLabelText: "Yes",
        rightLabelText: "No"
    };
}($));

InputExtender.cs

public static MvcHtmlString HiddenForExt<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, IDictionary<string, object> htmlAttributes = null, bool readOnly = false)
{
    if (htmlAttributes == null)
    {
        htmlAttributes = new Dictionary<string, object>();
    }

    var modelMetadata = ModelMetadata.FromLambdaExpression(expression, html.ViewData);

    if (modelMetadata != null) htmlAttributes.Add("id", modelMetadata.PropertyName);

    var memberExpression = expression.Body as MemberExpression;

    var stringLengthAttribute = memberExpression?.Member.GetCustomAttributes(typeof(StringLengthAttribute), false).FirstOrDefault() as StringLengthAttribute;

    if (stringLengthAttribute != null)
    {
        if (htmlAttributes.ContainsKey("maxlength") == false)
        {
            htmlAttributes.Add("maxlength", stringLengthAttribute.MaximumLength);
        }
    }

    return html.HiddenFor(expression, htmlAttributes);
}

test.cs中

public class Test
{
    [Required(ErrorMessage = "Are you a badger? Requires a Yes or No")]
    [Display(Name = "Are you a badger?")]
    public bool? Question { get; set; }

    [BooleanRequired(ErrorMessage = "You must accept the terms and conditions.")]
    [Display(Name = "I agree with the ")]
    public bool Terms { get; set; }
}

如果它有助于我使用jquery-2.1.4.js，jquery.validate-1.17.0.js和jquery.validate.unobtrusive-3.2.11.js。

我希望有人能够对我可能做错了什么或者如何为这些问题提供解决方法有所了解。