使用 jQuery.Validate() 忽略整个表单上的必需项答案

【问题标题】：Ignoring required's on an entire form using jQuery.Validate()使用 jQuery.Validate() 忽略整个表单上的必需项
【发布时间】：2016-02-24 12:19:04
【问题描述】：

我正在尝试使用 jQuery validate 忽略整个表单上所需的验证，但似乎无法使其正常工作，这是在使用 @html 帮助器的 MVC 项目上，因此我无法向元素添加名称要验证，我也无法删除验证，然后使用 jQuery 将其全部添加回来，因为并非所有字段都是必需的，我将把我当前的 java 放在下面，任何帮助将不胜感激

$("body").on("click", ".next", function(e) {
  e.preventDefault();
  var btn = $(this);
  var form = btn.closest("form");
  form.validate({
    rules: {
      required: false
    }
  });
  //check if form is valid
  if (form.valid()) {
    var out = form.validate({
      rules: {
        required: true
      }
    });
    if (form.valid()) {
      alert("valid and complete");
    } else {
      alert("valid but not complete");
    }
  } else {
    showSysMessage("Invalid Data. Please Check the Data in the Highlighted Fields", {
      color: "#FFB347"
    });
  };
});

编辑

此验证器需要验证具有 300 多个字段的多个不同部分，因此使用每个单独元素的名称是不切实际的，所以我想知道是否有一种方法可以验证表单而不验证输入所需的内容，希望对你有帮助

编辑 2

我是我的模型，我有一些必填字段，但我想在验证的第一阶段检查输入的数据是否有效，如果是，它将把这些保存到数据库中并允许换页，那么验证的第二步需要检查模型中设置为required的元素是否全部填写完毕，如果返回则表示表单已经完成

这是我的模型示例

    [Required]
    [Display(Name = "Title")]
    public int? TitleID { get; set; }

    [Required]
    [Display(Name = "First Name")]
    public string FirstName { get; set; }

    [Display(Name = "Middle Names")]
    public string Middlename { get; set; }

    [Required]
    [Display(Name = "Surname")]
    public string Surname { get; set; }

    [Required]
    [Display(Name = "Date of Birth")]
    public DateTime? DateOfBirth { get; set; }

    [Required]
    [Display(Name = "Nationality")]
    public string Nationality { get; set; }

    [Required]
    [Display(Name = "Martial Status")]
    public int? StatusMaritalID { get; set; }

    [Required]
    [Display(Name = "NI Number")]
    public string NINumber { get; set; }

    [Required]
    [Display(Name = "Have you been known by diffrent names?")]
    public bool? IsKnownByOtherNames { get; set; }

    [Required]
    [Display(Name = "Phone Number")]
    public string PhoneNumber { get; set; }

    [Required]
    [Display(Name = "Mobile Number")]
    public string MobileNumber { get; set; }

    [Required]
    [Display(Name = "Email")]
    public string Email { get; set; }

这里是一个控制器示例，可以获取任何填写的数据

    model.TitleID = data.TitleID;

    model.FirstName = data.FirstName;

    model.Middlename = data.Middlename;

    model.Surname = data.Surname;

    model.DateOfBirth = data.DateOfBirth;

    model.Nationality = data.Nationality;

    model.StatusMaritalID = data.StatusMaritalID;

    model.NINumber = data.NINumber;

    model.IsKnownByOtherNames = data.IsKnownByOtherNames;

    model.PhoneNumber = data.PhoneNumber;

    model.MobileNumber = data.MobileNumber;

    model.Email = data.Email;

这是一个保存控制器的例子

                data.TitleID = model.TitleID;

                data.FirstName = model.FirstName;

                data.Middlename = model.Middlename;

                data.Surname = model.Surname;

                data.DateOfBirth = model.DateOfBirth;

                data.Nationality = model.Nationality;

                data.StatusMaritalID = model.StatusMaritalID;

                data.NINumber = model.NINumber;

                data.IsKnownByOtherNames = model.IsKnownByOtherNames;

                data.PhoneNumber = model.PhoneNumber;

                data.MobileNumber = model.MobileNumber;

                data.Email = model.Email;

这是正在使用的视图

<h2>Personal Details</h2>

<div class="row-fluid">
    <div class="span3">
        @Html.LabelFor(x => x.TitleID)
        @Html.DropDownListFor(x => x.TitleID, Model.Titles, "-- Please Select --", new { @class = "input-block-level" })
        @Html.LabelFor(x => x.DateOfBirth)
        @Html.TextBoxFor(x => x.DateOfBirth, "{0:dd/MM/yyyy}", new { @class = "input-block-level date-picker" })
    </div>
    <div class="span3">
        @Html.LabelFor(x => x.FirstName)
        @Html.TextBoxFor(x => x.FirstName, new { @class = "input-block-level" })
        @Html.LabelFor(x => x.Nationality)
        @Html.TextBoxFor(x => x.Nationality, new { @class = "input-block-level" })
    </div>
    <div class="span3">
        @Html.LabelFor(x => x.Middlename)
        @Html.TextBoxFor(x => x.Middlename, new { @class = "input-block-level" })
        @Html.LabelFor(x => x.StatusMaritalID)
        @Html.DropDownListFor(x => x.StatusMaritalID, Model.StatusMaritals, "-- Please Select --", new { @class = "input-block-level" })
    </div>
    <div class="span3">
        @Html.LabelFor(x => x.Surname)
        @Html.TextBoxFor(x => x.Surname, new { @class = "input-block-level" })
        @Html.LabelFor(x => x.NINumber)
        @Html.TextBoxFor(x => x.NINumber, new { @class = "input-block-level" })
    </div>
</div>

<h3>Contact Details</h3>

<div class="row-fluid">
    <div class="span3">
        @Html.LabelFor(x => x.PhoneNumber)
        @Html.TextBoxFor(x => x.PhoneNumber, new { @class = "input-block-level" })
    </div>
    <div class="span3">
        @Html.LabelFor(x => x.MobileNumber)
        @Html.TextBoxFor(x => x.MobileNumber, new { @class = "input-block-level" })
    </div>
    <div class="span6">
        @Html.LabelFor(x => x.Email)
        @Html.TextBoxFor(x => x.Email, new { @class = "input-block-level", type="email" })
    </div>
</div>
<div class="row-fluid">
    <div class="checkbox span12" style="padding-left:0;">
        @Html.CheckBox("IsKnownByOtherNames", Model.IsKnownByOtherNames != null && (bool)Model.IsKnownByOtherNames)
        @Html.LabelFor(x => x.IsKnownByOtherNames)
    </div>
</div>

最后这是我的整个保存脚本

$("body").on("click", ".next", function(e){
            debugger;
            e.preventDefault();
            var btn = $(this);
            var form = btn.closest("form");
            form.validate({
                rules: {
                    required: false
                }
            });
            //check if form is valid
            if (form.valid()) {
                var out = form.validate({
                    rules: {
                        required: true
                    }
                });
                if (form.valid()) { 
                    // disable the button to prevent multiple posts
                    btn.prop("disabled", true);
                    // serialise the form fields into an array
                    var fields = form.serializeArray();
                    // create a blank object to stuff the parameters into for the ajax call
                    var params = {};
                    // loop over the array and create a property for each item in array
                    // in the format expected by the controller action
                    $.each(fields, function (index, element) {
                        params[element.name] = element.value;
                    });
                    //loop over all checkboxes and see if they are checked or not
                    var checkboxes = form.find("input:checkbox")
                    $.each(checkboxes, function (index, element) {
                        params[element.name] = $(element).is(":checked");
                    });
                    // Make the ajax post call
                    // passing the parameters
                    $.post("UpdateCheck", params)
                    .success(function (data) {
                        alert("valid and complete");
                        // if fail alert the user of fail with error
                        if (data == false) {
                            //Create a toast message alerting of fail with reason
                            showSysMessage("Failed to Save. (Data Error)", { color: "#FFB347" });
                            // re-enables button
                            btn.prop("disabled", false);
                        } else {
                            btn.prop("disabled", false);
                            var currentpage = parseInt($(".TinyDancer").attr("data-currentpage"))
                            var newpage = currentpage + 1;
                            $.post("Page"+PageNos[newpage], {id:@Model.ID }).success(function(html){
                                $("#WizardStage").val(PageNos[newpage]);
                                $(".page[data-pageno='" + PageNos[newpage] + "']").parent().addClass("active").siblings().removeClass("active");
                                $(".TinyDancer").slideUp(function(){$(".TinyDancer").html(html).promise().done(function() {$(".TinyDancer").slideDown();});});
                                $(".TinyDancer").attr("data-currentpage", newpage);
                                $("form").removeData("validator");
                                $("form").removeData("unobtrusiveValidation");
                                $.validator.unobtrusive.parse("form");
                            });
                        }
                    }).fail(function () {
                        showSysMessage("Failed to Save. (Network Transport Error))", { color: "#FFB347" });
                    });
                } else {
                    alert("valid but not complete");}
            }else{
                showSysMessage("Invalid Data. Please Check the Data in the Highlighted Fields", { color: "#FFB347" });
            };
        });

【问题讨论】：

什么意思我不能给元素添加名字来验证 - 如果你使用HtmlHelper 方法，那么name 属性已经被添加了。目前尚不清楚您要做什么。您是否只想根据某些条件忽略客户端验证？
这个验证器需要验证具有超过 300 个字段的多个不同部分，因此使用每个单独元素的名称将是不切实际的，所以我想知道是否有一种方法来验证表单而不是验证输入所需的内容，希望对您有所帮助，我会将其附加到问题的底部以供其他人使用，干杯
但是你为什么不只是使用jqueryvalidate.unobtrusive.js 和@Html.ValidationMessageFor() 方法但是它仍然不清楚。您是否只想排除某些项目（在这种情况下，您可以给它们一个类名（比如class="ignore"）并将验证器配置为忽略具有该类名的所有元素。
我应该提到我正在从事的项目确实使用 jqueryvalidate.unobtrusive.js。另外我应该提到验证背后的想法是不要完全忽略元素，而只是不检查它们是否需要因此验证的两个步骤，如果您可以提供允许我向元素添加类的解决方案并且忽略所需的我会很乐意使用它，再次感谢
This answer 显示了一个示例（目前尚不清楚您在此处尝试实现的目标，以及这是否真的适合您）

标签： javascript jquery asp.net-mvc validation html-helper

【解决方案1】：

默认情况下，MVC 将属性名称作为输入的名称，并在值类型中默认添加 required，我不知道您的视图模型，也许您有一个在这种情况下不需要的值类型字段使其可空解析

【讨论】：

我的模型中所有字段都可以为空，请检查编辑，谢谢

【解决方案2】：

感谢 Stephen Muecke 为我指明了正确的方向，我终于想出了一个完全动态的解决方案，它应该适用于每个领域，而不需要单独的页面/部分或模型。

要做到这一点首先在您加载页面/部分运行此脚本以将名为 isRequired 的类添加到所有必需的元素

var fields = $("form").find("input[data-val]");
$.each(fields, function (index, element) {
    $(element).addClass("isRequired")
});

接下来要做的就是像这样格式化验证脚本

$("body").on("click", ".next", function(e){
    e.preventDefault();
    var btn = $(this);
    var form = btn.closest("form");

    $.each($('.isRequired'), function (index, element) {
        $(element).rules('add', {
            required: false   // set a new rule
        });
    });

    form.validate();
    //check if form is valid
    if (form.valid()) {
        $.each($('.isRequired'), function (index, element) {
            $(element).rules('add', {
                required: true   // set a new rule
            });
        });
        form.validate();
        if (form.valid()) { 
            alert("Form is Completed and Valid")
        } else {
            alert("Form is Valid but not complete");}
    }else{
        alert("Data Enter in some of the fields is of an Invalid Type")
    };
});

【讨论】：