使用 jQuery 使用 Select2 验证插件重置表单？

Question

我正在使用 jQuery 验证来验证我的表单。并且内部表格有标签 select，我的 select 使用 select2 jQuery。我在清除 select2 更改必填字段时遇到问题。如何将验证与 select2 结合使用？

我的代码：

$(document).ready(function () {
//validate form
$(".form_required").validate({
    highlight: function (element, errorClass, validClass) {
        $(element).parents('.form-control').removeClass('has-success').addClass('has-error');     
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).parents('.form-control').removeClass('has-error').addClass('has-success');
    },
    errorPlacement: function (error, element) {
        if (element.hasClass('select2') && element.next('.select2-container').length) {
            error.insertAfter(element.next('.select2-container'));
        } else {
            error.insertAfter(element);
        }
    }
});

$('.select2').select2({
    allowClear: true,
    placeholder: ""
}).on("change", function (e) {
    $(this).valid();
});
});

function clear(){
   $("#myformHeader select").val('').trigger('change');
}

我的HTML:

<form name="myformHeader" id="myformHeader" class="form-horizontal form_required">
    <select type="text" name="ddl" id="ddl" class="form-control select2" required>
       <!-- many option -->
    </select>
    <select type="text" name="ddl2" id="ddl2" class="form-control select2" required>
       <!-- many option -->
    </select>
    <button  type="button" onclick="clear()">Reset</button>
</form>

点击按钮重置时需要这样显示。我不想清楚地展示这个

Answer 1

如果您希望 select2 成为可选属性，只需删除其必需的属性即可；)

否则，如果您想要一个值或为空，这应该可以解决问题；

在执行 .validate() 之前

$.validator.addMethod("atLeastOneElement", (value, element, options) => {
 // check whatever you need and return boolean (true = valid)
});

然后将其添加到验证({})

rules: {
    ddl: {
        atLeastOneElement: true
    }
}

dll 是您的 select 的名称而不是 ID 顺便说一句（在您的情况下，名称和 ID 是相同的）

Answer 2

您的问题与 Select2 无关，因为没有它您也会遇到同样的问题。在 required 字段上触发 .valid() 不会清除验证消息...它只会重申它们。

要清除表格错误，则需要使用the plugin's .resetForm() method:

$("#myformHeader").validate().resetForm()

然后要清除表单数据，使用the JavaScript .reset() method:

document.getElementById("myformHeader").reset();

or

$("#myformHeader")[0].reset();

按钮：

<button type="button" id="reset">Reset</button>

jQuery:

$('#reset').on('click', function () {
    var form = $("#myformHeader");
    form.validate().resetForm();   // clear out the validation errors
    form[0].reset();               // clear out the form data
});

使用 jQuery 使用 Select2 验证插件重置表单？

Form reset using jQuery Validate plugin with Select2?

jquery

jquery-validate

jquery-select2