select2 和 jquery 验证无法正常工作

Posted 2023-05-07

【中文标题】select2 和 jquery 验证无法正常工作

【英文标题】：select2 and jquery validation not working properly

【发布时间】：2014-11-20 16:12:21

【问题描述】：

尝试在 select2 上使用验证，但存在一些问题：

将显示错误消息，但在输入有效条目时不会删除。

我正在加载一个工作正常的初始值...但是，验证器无法识别该值并告诉我它无效...我必须手动输入相同的值，然后验证，但仍然没有删除显示它有效的错误类/消息。

表格：

<div class="col-md-12 margin-bottom-30 form-group">
    <div class="input-modal-group">
        <label for="vedit-filter" class="f-14"><b>filter :</b></label>
        <input id="vedit-filter" type="text" name="settings[filter]" class="form-control select2"/>
    </div>
</div>
<input id="filter_default" type="hidden" name="settings[original]" value="<?php echo escapeStr($result[filter]); ?>"/>

js：

// get the default filter           
var default_filter = $("#filter_default").val();

$("#vedit-filter").select2(
    //placeholder: "Select or enter...",
    allowClear: true,
    multiple: false,
    ajax: 
        dataType: 'json',
        url: '/process/get_filter_list.php',
        results: function (data) 
            return results: data;
        
    ,
    createSearchChoice:function(term, data) 
        if ($(data).filter(function() 
            return this.text.localeCompare(term)===0; ).length===0) 
                return id:term, text:term;
            
        ,
    initSelection : function (element, callback) 
        var obj= id:default_filter, text:default_filter;
        callback(obj);
    
);

$('#filters-edit').validate(
    errorElement: 'span', //default input error message container
    errorClass: 'help-block', // default input error message class
    focusInvalid: false, // do not focus the last invalid input
    rules: 
        'settings[filter]': 
            required: true
        
    ,

    messages: 
        'settings[filter]': 
            required: "Filter is required."
        
    ,

    highlight: function (element)  // hightlight error inputs
        $(element)
            .closest('.form-group').addClass('has-error');
    ,

    unhighlight: function (element)  // un-hightlight error inputs
        $(element)
            .closest('.form-group').removeClass('has-error'); 
    ,

    errorPlacement: function (error, element) 
        error.insertAfter(element.closest('.input-modal-group'));
    ,

    // ajax submit
    submitHandler: function (form) 

    ...submit stuff below

【参考方案1】：

默认情况下，字段验证仅由这些事件触发（对于type="text" 字段）...

onfocusout，当用户离开字段时（仅验证字段）

onkeyup，当用户在字段中输入时（仅验证字段）

onclick，当用户点击submit按钮时（验证整个表单）

如果您需要在以编程方式更改字段值后以编程方式触发验证，则需要在该字段上调用 ​​the .valid() method。它将有效地触发与上述事件类似的验证。

$('#myField').valid();  // validates just field element with id="myField"

$('#myForm').valid();  // validates the whole form

因此，您需要在 select2 中找到一个在值更改时触发的方法，并将 .valid() 放入其中。看起来the change event 是您需要的。

$("#vedit-filter").select2(
    // your options here
).on('change', function() 
    $(this).valid();
);

【讨论】：

这似乎解决了删除错误类的问题，但在页面初始加载时没有使用默认值（使用initSelection）。换句话说，页面上加载了一个默认值 - 如果我不触摸它并提交无效的表单。如果我现在更改它，它会正确验证并删除错误（在上面的修复之后）。跨度>

@user756659，根据您的具体情况调整我在答案中提供的信息。这意味着您只需在页面加载时调用$("#vedit-filter").valid()。

试过了，但它不起作用 - 它是 initSelecton 添加了默认值。我最终手动将默认值添加到 html 为 <input id="vedit-filter" type="text" name="settings[filter]" value="<?php echo escapeStr($result['filter']); ?>" class="form-control select2me"/> 但是，如果可能的话，我宁愿不使用这种方法......我可以想到一种我不能使用这种解决方案的情况。

【参考方案2】：

我遇到了同样的问题。您可以尝试下面的代码使其工作。选择 2 添加样式显示：无到选择。这就是表单验证不起作用的原因，因为它是隐藏的。 覆盖验证并允许他们也验证隐藏字段。

 $(document).ready(function () 
        //Validate form mainly SELECT 2
        var $form = $("#your-form-id");
        $form.validate().settings.ignore = [];
    );

【参考方案3】：

应该是：

    $("select").on("select2:close", function (e) 
        $(this).valid(); 
    );

请参考： How to make select2 work with jquery.validation plugin?