1

Имеется форма, которая валидируется при помощи jQuery Validate: https://codepen.io/anon/pen/EGXyvr

Код валидации выглядит следующим образом:

$("#submit").on("click", function() {
let orderForm = $('#order'),
    successMsg = $(".success");

orderForm.validate({
    rules: {
        fullName: {
            required: true
        },
        eMail: {
            required: true,
            email: true
        },
        question: {
            required: true
        }
    },

    messages: {
        fullName: {
            required: "The name field is required"
        },
        eMail: {
            required: "The e-mail field is required",
            email: "The e-mail address must contain @ symbol"
        },
        question: {
            required: "The question field is required"
        }
    },

    errorElement: "div",

    errorPlacement: function(error, element) {
        error.insertAfter('#submit');
    },

    submitHandler: function() {
        successMsg.show();
        setTimeout(function() {
            location.reload();
        }, 2500);
    }
})

});

Как изменить порядок вывода сообщений об ошибках, чтобы сообщение "The name field is required" выводилось первым, а "The question field is required" - последним?

1
  • Изменить порядок добавления полей в orderForm. У Вас, вероятно, fullName стоит после question.
    – Eleferen
    25 дек 2018 в 8:20

2 ответа 2

3
error.insertAfter('#submit');

Добавляет сообщения об ошибке после кнопки "Submit". Соответственно, получается инверсия порядка. Предлагаю, добавить div для вывода сообщений об ошибке. И добавлять их туда через append Вот пример (переделанный ваш) https://codepen.io/eustatos/pen/MZoexZ?editors=1000

1
  • Все работает, благодарю за ответ! 25 дек 2018 в 8:36
1

Так происходит потому что insertAfter вставляет елемент после выбраного вами елемента. То есть, сначала после кнопки submit у вас добавилась ошибка для поля fullName, затем после кнопки добавилась ошибка для поля eMail, подвинув вниз предыдущую ошибку (ошибку для поля fullName) и так же произошло с ошибкой для question.

Например можно сделать так:

errorPlacement: function(error, element) {
  document.querySelector('.errors-wrapper').append(error[0]);
}

или же:

errorPlacement: function(error, element) {
  $('.errors-wrapper').append(error);
}

Добавив блок с классом .errors-wrapper туда, где нужно вывести ошибки. Или же используйте insertBefore

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.