select2和jquery验证无法正常工作 [英] select2 and jquery validation not working properly

问题描述

尝试在select2上使用验证，但有几个问题:

Trying to use validation on select2 with a few issues :

• 将显示错误消息，但输入有效条目后，该错误消息将不会消失.

• the error message will show, but it will not remove when a valid entry is entered.

我正在加载一个可以正常工作的初始值...但是，验证程序无法识别该值并告诉我它是无效的...我必须手动输入相同的值，然后它才能进行验证，但仍不能删除表明其有效的错误类/消息.

I am loading an initial value which works fine... the validator, however, does not recognize the value and tells me it is invalid... I have to manually type in the same value and then it validates, but still does not remove the error class/message showing it is valid.

表格:

<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

推荐答案

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

By default, the validation on a field is only triggered by these events (for a type="text" field)...

• onfocusout，当用户离开字段时(仅验证该字段)

• onfocusout, when the user leaves a field (validates just the field)

onkeyup，当用户在字段中键入时(仅验证该字段)

onkeyup, when the user is typing within a field (validates just the field)

onclick，当用户单击submit按钮(验证整个表单)时

onclick, when the user clicks the submit button (validates the whole form)

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

If you need to programmatically trigger validation after you programmatically change the value of a field, then you need to invoke the .valid() method on that field. It will effectively trigger validation similar as the events above.

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

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

因此，您需要在select2中找到一个方法，只要更改值，该方法就会触发，并将.valid()放在其中.看起来您需要的change事件.

So you'll need to find a method within select2 that is fired whenever the value is changed and put .valid() inside of that. It looks like the change event is what you'll need.

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

这篇关于select2和jquery验证无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！