1

我试图让下拉列表在单击“继续”时添加添加/删除的类（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/

编辑：有人吗？

4

1 回答 1

0

我不明白你到底想把错误消息放在哪里，但我在你的小提琴中做了一些编辑，现在检查它是否有帮助。

请更清楚您要放置错误消息的位置。

$(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/

于 2016-10-03T23:32:04.500 回答