代码之家 › 专栏 › 技术社区 › gene b.

jQuery Validate:使用Select2清除单个/特定字段错误[重复]

jquery-validate jquery

0

gene b. · 技术社区 · 7 年前

尝试对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

0 回复 | 直到 11 年前

1

8

Sparky 11 年前

默认情况下,字段上的验证仅由这些事件触发(对于 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();
});