使用jQuery Validate插件和Select2重置表单？

Question

我正在使用jQuery Validate验证我的表单。并且在表单中有标签选择，我使用 select2 jQuery选择。当我从中清除 select2 更改必填字段时遇到问题。如何在select2中使用validate可以正常工作？

我的代码：

  $（document）.ready（function（）{
//验证表格
$（“。form_required”）。validate（{
    高亮显示：函数（element，errorClass，validClass）{
        $（element）.parents（'。form-control'）。removeClass（'has-success'）。addClass（'has-error'）;
    }，
    取消突出显示：函数（element，errorClass，validClass）{
        $（element）.parents（'。form-control'）。removeClass（'has-error'）。addClass（'has-success'）;
    }，
    errorPlacement：函数（错误，元素）{
        如果（element.hasClass（'select2'）&& element.next（'。select2-container'）。length）{
            error.insertAfter（element.next（'。select2-container'））;;
        }其他{
            error.insertAfter（element）;
        }
    }
}）;

$（'。select2'）。select2（{
    allowClear：正确，
    占位符：“”
}）。on（“ change”，函数（e）{
    $（this）.valid（）;
}）;
}）;

函数clear（）{
   $（“＃myformHeader select”）。val（''）。trigger（'change'）;
}
 

我的HTML：

  <表单名称=“ myformHeader” id =“ myformHeader” class =“ form-horizo​​ntal form_required”>
    <选择type =“ text” name =“ ddl” id =“ ddl” class =“ form-control select2”必需>
       <！-许多选项->
    
    <选择type =“ text” name =“ ddl2” id =“ ddl2” class =“ form-control select2”必需>
       <！-许多选项->
    
    重置

 

单击“重置”按钮时，需要这样显示。我不想显示这个

Answer 1

您的问题与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
});

Answer 2

如果您希望select2是可选的，只需删除其必填属性;）

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

执行.validate（）之前

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

然后将其添加到validate（{}）

rules: {
    ddl: {
        atLeastOneElement: true
    }
}

dll是您选择的名称，而不是ID btw（在您的情况下，名称和ID相同）