Combobox validation

by BRANIS

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://www.dreamwire.nl/themes/Mustache/v1.1/Fixed/js/jquery.validate.min.js"></script>
<form action="" id="form1">
    <label for="textBox1">► TextBox1</label>
    <input name="textBox1" type="text" id="textBox1" />
    <br />
    <label for="textBox2">TextBox2</label>
    <input name="textBox2" type="text" id="textBox2" />
    <br />
    <label for="textBox3">TextBox3</label>
    <input name="textBox3" type="text" id="textBox3" />
    <br />
    <label for="dropList">► Combobox Ej</label>
    <select name="dropList" id="dropList">
        <option value=""></option>
        <option value="1">uno</option>
        <option value="2">dos</option>
        <option value="3">tres</option>
        <option value="4">cuatro</option>
    </select>
    <br />
    <label for="dropList2">Another Combobox</label>
    <select name="dropList2" id="dropList2">
        <option value=""></option>
        <option value="12">uno2</option>
        <option value="22">dos2</option>
        <option value="32">tres2</option>
        <option value="42">cuatro2</option>
    </select>
    <br />
    <label class="rsvLabel">► Servicio:</label>
    <select name="servicio" id="servicio">
        <option value=""></option>
        <option value="Alesund AES">Alesund AES</option>
        <option value="Alghero AHO">Alghero AHO</option>
        <option value="Arad ARW">Arad ARW</option>
        <option value="BarceLona - Terminal 2 BCN">BarceLona - Terminal 2 BCN</option>
        <option value="Barcelona Girona GRO">Barcelona Girona GRO</option>
        <option value="Bari BRI">Bari BRI</option>
        <option value="Basel Mulhouse MLH">Basel Mulhouse MLH</option>
        <option value="Belgrade BEG">Belgrade BEG</option>
        <option value="Bergen BGO">Bergen BGO</option>
        <option value="Bologna">Bologna</option>
    ...

CSS

<style type="text/css"> .ui-combobox {
    position: relative;
    display: inline-block;
}
.ui-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
    /* adjust styles for IE 6/7 */
    *height: 1.7em;
    *top: 0.1em;
}
.ui-combobox-input {
    margin: 0;
    padding: 0.3em;
}
</style>

JavaScript

$.validator.setDefaults({
        errorClass: 'ui-state-error',
        debug: false,
        errorPlacement: function (error, element) {
            if (element.context.id.indexOf('_combobox') == -1) error.insertAfter(element);
            else error.appendTo(element.parent());
        }
    });

    (function ($) {
        $.widget("ui.combobox", {
            _create: function () {
                var input,
                that = this,
                    select = this.element.hide(),
                    select_id = select.attr('id'),
                    selected = select.children(":selected"),
                    value = selected.val() ? selected.text() : "",
                    wrapper = this.wrapper = $("<span>")
                        .addClass("ui-combobox")
                        .insertAfter(select);

                function removeIfInvalid(element) {
                    var value = $(element).val(),
                        matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(value) + "$", "i"),
                        valid = false;
                    select.children("option").each(function () {
                        if ($(this).text().match(matcher)) {
                            this.selected = valid = true;
                            return false;
                        }
                    });
                    if (!valid) {
                        // remove invalid value, as it didn't match anything
                        $(element)
                            .val("")
                            .attr("title", value + " didn't match any item")
                            .tooltip("open");
                        select.val("");
                        setTimeout(function () {
                            input.tooltip("close").attr("title", "");
                        }, 2500);
                        input.data("autocomplete").term = "";
                        return false;
                    }
                }

             ...