0

我正在使用dropkick自定义下拉插件来自定义我的select元素和Parsley js表单验证。在表单验证时，错误消息确实显示在下拉列表下，但未error添加类。

我知道dropkick隐藏<select>并生成自己的自定义<div>并<ul>显示自定义下拉列表。那么有没有办法将错误消息类添加到<div>由dropkick动态生成的这些？

这是我的代码：

HTML：

<form class="form-inline row" id="quote_form_header">
    <select class="dropkick_select" 
            data-parsley-required="true"
            data-parsley-required-message="State is required.">
        <option selected disabled>State</option>
        <option>State1</option>
        <option>State2</option>
    </select>

    <button type="submit">GET A QUOTE</button>
</form>

JS：

<script>
$(function(){
    //Initialize dropkick on the form select elements
    $(".dropkick_select").dropkick();

    //Parsley js validation code
    var parsley_valiation_options = {
         errorTemplate: '<span class="error-msg"></span>',
         errorClass: 'error',
    }

    if ($('#quote_form_header').length > 0)
        $('#quote_form_header').parsley(parsley_valiation_options);
})
</script>
4

1 回答 1

1

终于找到了解决办法：DEMO

这是我制作和工作的代码：

var parsley_valiation_options = {
  errorTemplate: '<span class="error-msg"></span>',
  errorClass: 'error'
}
$('form').parsley(parsley_valiation_options)

window.Parsley.on('field:error', function() {
  var element = $(this.$element);
  // This global callback will be called for any field that fails validation.
  //console.log('Validation failed for: ', this.$element);
  //If the select element is a dropkick select, then add error class to dropkick generated custom <div> element
  if ($(this.$element).hasClass('dropkick_select')) {
    //var el = $(element).siblings('div.dk-select').first();
    $('.dk-selected').addClass('error');
  }
});
//Initialize dropkick on the form select elements
$(".dropkick_select").dropkick({
  change: function() {
    var select_elem = this.data.elem;
    var selected_value = this.value;
    //console.log("selected_value = "+selected_value);
    //if selected value is not blank and if validation error message is currently being displayed under the select element, then remove the error message
    if (selected_value != "" && $(select_elem).siblings('ul.parsley-errors-list').length > 0) {
      $(select_elem).siblings('ul.parsley-errors-list').children('span').remove();
    }
  }
});
于 2017-05-04T10:35:15.367 回答