代码之家 › 专栏 › 技术社区 › Stfvns

使用带有Select2的jQuery Validate插件重置表单?

jquery-select2 jquery-validate jquery

Stfvns · 技术社区 · 6 年前

我正在使用jQuery Validate验证我的表单。在表单内部有标记select,my select使用 select2 jQuery。我有问题,当我把它从我的 选择2 更改所需字段。如何在select2中使用validate?

我的代码:

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

当点击按钮重置显示需要这样。我不想把这个说清楚

2 回复 | 直到 6 年前

Sparky 6 年前

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

要清除错误的形式,则需要使用 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
});

-1

Ben Bezac 6 年前

如果希望select2是可选的,只需删除它的必需属性;)

否则,如果你想有一个值或空这应该做的伎俩;

在执行之前。验证()

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

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

rules: {
    ddl: {
        atLeastOneElement: true
    }
}

dll是您选择的名称,而不是id btw(在您的情况下,名称和id是相同的)