Проверка зависимых опций выбора с помощью плагина jQuery Validation

Question

Введение

Я использую плагин jQuery Validation для проверки формы перед ее отправкой на сервер. Для простых случаев это прекрасно работает. Тем не менее, я считаю, что в официальной документации отсутствуют более продвинутые примеры.

IMAGINE

Представьте, что есть интернет-магазин с 3 локациями (Берлин, Париж и Рим). Однако доставка с курьерской службой возможна только в одном месте (Берлин). Обратите внимание: заказы можно отправлять по почте во все три места.

Я хотел бы убедиться, что проверка показывает ошибку, если пользователь выбирает курьерскую службу в сочетании с Римом или Парижем.

ПРОБЛЕМА

Я пытаюсь проверить два выбора, которые зависят от значений параметров друг друга. Хотя я не могу понять, как это сделать.

код

JsFiddle моего кода

HTML

<form id="myForm" name="myForm">
  <p><b>Order delivery</b></p>
  <p>
    City<br />
    <select name="city" id="city">
      <option selected value="">-- Please choose destination --</option>
      <option value="1">Berlin</option>
      <option value="2">Paris</option>
      <option value="3">Rome</option>
    </select>
  </p>
  <p>
    Delivery method<br />
    <select name="delivery" id="delivery">
      <option selected value="">-- Please choose delivery method --</option>
      <option value="1">By post</option>
      <option value="2">By courier</option>
    </select>
  </p>
  <input type="submit" />
</form>

Javascript

$( document ).ready( function () {
    jQuery.validator.addMethod("valueIsDeliveryPost", function(elementValue, element, param) {
        if (elementValue == 1) {
            return true;
        } else {
            return false;
        }
    }, "Value must equal param.");

    jQuery.validator.addMethod("valueIsDeliveryCourier", function(elementValue, element, param) {
        if (elementValue == 2) {
            return true;
        } else {
            return false;
        }
    }, "Value must equal param.");

    jQuery.validator.addMethod("valueIsEqualTo", function(elementValue, element, param) {
        return elementValue == param;
    }, "Value must equal param.");

    jQuery.validator.addMethod("valueIsNotEqualTo", function(elementValue, element, param) {
        return elementValue != param;
    }, "Value must not equal param.");

    $("#myForm").validate({
        debug: true,
        rules: {
            city: {
                required: true,
                valueIsNotEqualTo: "default"
            },
            delivery: {
                required: true,
                valueIsNotEqualTo: "default",
                valueIsDeliveryPost: {
                    param: 1, // if delivery by post is selected
                    depends: function(element) {
                        var cityVal = $("#city").val();
                        if ((cityVal != "") && (cityVal == 1)) { // if Berlin
                            return false;
                        } else if ((cityVal != "") && (cityVal == 2)) { // if Paris
                            return false;
                        } else if ((cityVal != "") && (cityVal == 3)) { // if Rome
                            return false;
                        }/* else {
                            return true;
                        }*/
                    }
                },
                valueIsDeliveryCourier: {
                    param: 2, // if delivery by courier is selected
                    depends: function(element) {
                        var cityVal = $("#city").val();
                        if ((cityVal != "") && (cityVal == 1)) { // if Berlin
                            return true;
                        } else if ((cityVal != "") && (cityVal == 2)) { // if Paris
                            return false;
                        } else if ((cityVal != "") && (cityVal == 3)) { // if Rome
                            return false;
                        }/* else {
                            return true;
                        }*/
                    }
                }
            },
        },
        messages: {
            city: {
                required: "Please select your city!",
                valueIsNotEqualTo: "Please select your city!"
            },
            delivery: {
                required: "Please select delivery method!",
                valueIsNotEqualTo: "Please select delivery method!",
                valueIsDeliveryPost: "Delivery by post is possible for all cities!",
                valueIsDeliveryCourier: "Courier delivery is possible only in Berlin!"
            },
            errorElement: "em",
            errorPlacement: function (error, element) {
                return false;
            },
            invalidHandler: function(form, validator) {
                var errors = validator.numberOfInvalids();
                if (errors) {
                    // Only show first invalid rule message
                    alert(validator.errorList[0].message);
                    // Set focus
                    validator.errorList[0].element.focus();
                }
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass("is-invalid").removeClass( "is-valid" );
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).addClass("is-valid").removeClass( "is-invalid" );
            },
            submitHandler: function(form) {
                alert('valid form');
            }
        }
    });
});

НАКОНЕЦ

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

Что я делаю, Вонг?

Пожалуйста, поделитесь своим опытом и идеями.

Answer 1

Кажется, ваша логика работает нормально.

Если вы нажмете кнопку "tidy" в вашего jsFiddle , вы увидите, что вы неправильно вложили errorElement, errorPlacement, invalidHandler, submitHandler, highlight и unhighlight опции внутри messages.

Предполагается, что этими опциями могут быть братья и сестры messages и rules.

$("#myForm").validate({
    rules: {
        ....
    },
    messages: {
        ....
    },
    errorElement: "em",
    errorPlacement: function (error, element) {
        ....
    },
    invalidHandler: function(form, validator) {
        ....
    },
    highlight: function (element, errorClass, validClass) {
        ....
    },
    unhighlight: function (element, errorClass, validClass) {
        ....
    },
    submitHandler: function(form) {
        ....
    }
});

DEMO: jsfiddle.net / pey29j4n / 2 /

ПРИМЕЧАНИЕ : Я полностью согласен с Даниилом. Во-первых, нет смысла предоставлять пользователю недопустимые параметры, и было бы намного проще динамически добавлять / удалять option из select.

.

Вот очень грубое доказательство концепции:

$('#city').on('change', function() {
    if ($(this).val() == '1') {
        $('#delivery option[value="1"]').remove();
    }
});

Или вы могли бы отключить option, скрыв его :

$('#city').on('change', function() {
    var option = $('#delivery option[value="1"]');
    if ($(this).val() == '1') {
        option.attr('disabled', true);
    } else {
        option.attr('disabled', false);
    }
});