jEasy ComboBox Demo

Show's result of setting non-valid ID, and validation of that value.

by Hilarius Doren

HTML

<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<div>
<label id="RegionLabel">Region:</label>
<input class="easyui-combobox" id="Region" name="Region" />
</div>

JavaScript

$.extend($.fn.validatebox.defaults.rules,{
    exists:{
        validator:function(value,param){
            var cc = $(param[0]);
            var v = cc.combobox('getValue');
            var rows = cc.combobox('getData');
            for(var i=0; i<rows.length; i++){
                if (rows[i].id == v){return true}
            }
            return false;
        },
        message:'The entered value does not exists.'
    }
});

$(function () {
    $('#Region').combobox({
        panelHeight: 'auto',
        selectOnNavigation: false,
        valueField: 'id',
        textField: 'text',
        editable: true,
        required: true,    
        validType: 'exists["#Region"]',
        onLoadSuccess: function () { },
        filter: function (q, row) {
        return row.text.toLowerCase().indexOf(q.toLowerCase()) == 0;
        },
        data: [{"id":"*","text":"- Select Region -","selected":"true"},{"id":"1","text":"Americas"},{"id":"2","text":"APAC"},{"id":"3","text":"Corp"},{"id":"4","text":"CSI"},{"id":"6","text":"Origio"}]
    });
    
    $('#Region').combobox('setValue', '5');
    
    $('#Region').combobox('validate')
    alert($('#Region').combobox('isValid'));
});