Добавление класса в раскрывающийся список selectpicker при отправке

Я пытаюсь сделать так, чтобы в раскрывающемся списке был добавленный / удаленный класс (input-validation-error), добавленный в <div class="btn-group bootstrap-select required" при нажатии «Продолжить», а не только при изменении раскрывающегося списка.

Класс input-validation-error будет иметь красную рамку при нажатии кнопки «Продолжить», чтобы показать пользователю, что ему нужно выбрать из раскрывающегося списка. Я использую selectpicker для изменения стиля раскрывающихся списков Bootstrap и jquery validate для проверки.

.input-validation-error button {
    border: 1px solid red;
}

<select name="country" id="country" class="required selectpicker">
      <option value="">Select Country</option>
      <option value="Afghanistan">Afghanistan</option>
      [...]
</select>


$(function () {
  $('select[name^="country"]').change(function () {
    var selValue = $(this).val();
    $("#form-jsvalidate").validate().element(this);
    if (selValue.length > 0) {
      $(this).next('div').removeClass("input-validation-error");
    }
    else {
      $(this).next('div').addClass("input-validation-error");
    }
  });
});

Я считаю, что это должно быть что-то вроде $('.btn-submit-val').on('click', function() { var selValue = $('select[name^="country"]').val();, но, очевидно, не с тех пор, и все остальное, что я пробовал, не работает. Мы очень ценим любую точку в правильном направлении.

https://jsfiddle.net/DTcHh/25795/

Изменить: кто-нибудь?


validation jquery bootstrap-selectpicker
person bunnycode    schedule 03.10.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не понял, куда именно вы хотите поместить сообщение об ошибке, но я сделал несколько правок в вашей скрипке, проверьте, помогает ли это.

Пожалуйста, более четко укажите, где вы хотите разместить сообщение об ошибке.

$(document).ready(function () {
    $("#form-jsvalidate").validate({
        errorClass:'input-validation-error',
                          validClass:'success',
                          errorElement:'button',
                          highlight: function (element, errorClass, validClass) { 
                            $(element).parents("div.control-group").addClass(errorClass).removeClass(validClass); 

                          },
        rules: {
            "country": {
                required: true
            },
        },
        messages: {
            "country": {
                required: "Country is required"
            }
        },
        submitHandler: function (form) {
            alert('valid');
            return false;
        }
    });
});

$(document).ready(function () {
    $('#form-jsvalidate').validate().settings.ignore = ':not(select.selectpicker, select:visible, input:visible, textarea:visible)';
});

$('.btn-submit-val').on('click', function() {
    $("#form-jsvalidate").valid();
    return false;
});

$(function () {
        $('select[name^="country"]').change(function () {
            var selValue = $(this).val();
            $("#form-jsvalidate").validate().element(this);
            if (selValue.length > 0) {
                $(this).next('div').removeClass("input-validation-error");
            }
            else {
                $(this).next('div').addClass("input-validation-error");
            }
        });
        });

https://jsfiddle.net/DTcHh/25836/

person Yuri Ramos    schedule 03.10.2016
comment
Спасибо и извините за непонятность. Я хочу, чтобы в самом раскрывающемся списке с перечисленными странами был добавлен класс, когда он не был выбран (другими словами, когда ошибка запускается при нажатии кнопки «Продолжить»). Таким образом, само раскрывающееся меню должно иметь красную рамку, а не метку сообщения об ошибке. - person bunnycode; 04.10.2016