Настраиваемое правило проверки jQuery.validate, приводящее к тому, что <input>после цели становится обязательным в Internet Explorer - PullRequest
Новая
       13

Настраиваемое правило проверки jQuery.validate, приводящее к тому, что <input>после цели становится обязательным в Internet Explorer

0 голосов
/ 25 июня 2018

У меня есть длинная форма в представлении приложения ASP.NET MVC, с определенным вводом "PaxCount", который должен равняться сумме двух других полей: AdultCount и ChildCount (я не хочу определять значение этого поле автоматически по другим причинам). 

<div class="form-group">
    @Html.LabelFor(model => model.PaxCount, htmlAttributes: new { style = "text-align:left ", @class = "control-label col-md-2" })
    <div class="col-md-2 input-group">
        @Html.EditorFor(model => model.PaxCount, new { htmlAttributes = new { placeholder = "0", style = "width:70px;", @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.PaxCount, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.AdultCount, htmlAttributes: new { style = "text-align:left", @class = "control-label col-md-2" })
    <div class="col-md-2 input-group">
        @Html.EditorFor(model => model.AdultCount, new { htmlAttributes = new { placeholder = "0", style = "width:70px;", @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.AdultCount, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.ChildCount, htmlAttributes: new { style = "text-align:left", @class = "control-label col-md-2" })
    <div class="col-md-2 input-group">
        @Html.EditorFor(model => model.ChildCount, new { htmlAttributes = new { placeholder = "0", style = "width:70px;", @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.ChildCount, "", new { @class = "text-danger" })
    </div>
</div>

Вот код jQuery, который добавляет новое правило проверки на стороне клиента к входу PaxCount: 

$.validator.addMethod("checkPaxCount",
    function (value, element, params) {
        $.validator.messages.checkPaxCount = jQuery.validator.format("Passenger count must be the sum of the no. of adults and children.");
        var chCount = parseInt($('#ChildCount').val());
        var adCount = parseInt($('#AdultCount').val());
        return parseInt(value) == chCount + adCount;
    },
    $.validator.messages.checkPaxCount
);

$(document).ready(function () {
    $('#PaxCount').rules('add',
        {
            checkPaxCount: true,
            messages: {
                checkpaxCount: "Error: ChildCount + AdultCount must = PaxCount"
            }
});

Это прекрасно работает в Chrome, однако, когда я пытаюсь сделать это в IE11, по какой-то причине поле PaxCount становится обязательным. Чтобы решить эту проблему, я добавил required: false, в список правил в моей функции, и это было исправлено. Однако, как только я сделал это, вместо этого стало обязательным поле AdultCount ниже. Поэтому я добавил новое правило к этому входу: 

$('#AdultCount').rules('add',
{
    required: false,
});

и то же самое произошло снова, поле ChildCount ниже , которое становится обязательным. Так далее и так далее, эффект продолжается на протяжении всей формы. Это можно решить, добавив правило к каждому полю, но мне просто интересно, почему это происходит, и, возможно, есть более элегантное решение?

На всякий случай, если это необходимо, вот код (с использованием DataAnnotations) для соответствующих полей в модели, которую использует форма: 

    [Display(Name = "No. of Passengers")]
    [Range(1,20, ErrorMessage = "Must be between 1 and 20.")]
    public int PaxCount { get; set; }

    [Display(Name = "No. of Adults")]
    [Range(1, 20, ErrorMessage = "Must be between 1 and 20.")]
    public int AdultCount { get; set; }

    [Display(Name = "No. of Children")]
    [Range(0, 20, ErrorMessage = "Must be between 0 and 20.")]
    public int ChildCount { get; set; }

1 Ответ

0 голосов
/ 25 июня 2018

Это происходит из-за того, что ваше пользовательское правило не допускает, чтобы поле было пустым.

Чтобы иметь пользовательское правило для «необязательного» поля, необходимо добавить «ИЛИ» this.optional(element)

Изменить его следующим образом ... 

$.validator.addMethod("checkPaxCount",
    function (value, element, params) {
        $.validator.messages.checkPaxCount = jQuery.validator.format("Passenger count must be the sum of the no. of adults and children.");
        var chCount = parseInt($('#ChildCount').val());
        var adCount = parseInt($('#AdultCount').val());
        return this.optional(element) || (parseInt(value) == chCount + adCount);
    },
    $.validator.messages.checkPaxCount
);
...