Проверка текстового поля с использованием события onchange?

У меня есть страница JSP с формой.

Форма имеет много полей, включая текстовые поля, переключатели и т. д.

У меня есть специальное поле, называемое emp id. Это текстовое поле.

Этот идентификатор emp должен состоять из 9 символов. Если он меньше или больше 9 символов, мне нужно дать пользователю предупреждающее сообщение о том, что введенный идентификатор emp недействителен.

Я написал метод javascript для проверки этого поля, который запускается при событии onchange этого поля.

Теперь я сделал это поле автоматическим поиском. Таким образом, пользователь может ввести первые несколько цифр, а затем увидеть список существующих идентификаторов emp, заполненных в поле идентификатора emp.

Примерно так обычно работают автозапуски.

Проблема заключается в том, что когда пользователь пытается выбрать идентификатор emp из автоматического поиска, поскольку указатель мыши перемещается за пределы текстового поля, запускается событие onchange.

Это неправильно, я хочу, чтобы событие запускалось после выбора значения из списка автоматического поиска или при вводе значения вручную.

Пожалуйста помоги.

Я использую автоматический поиск jquery.

Ниже мой код JSP.

    <script>
    $(function() {

        function validateEmpId(empId) {
            empId = $.trim(empId);
            empId = empId.replace(/\s/g, "");
            if (empId.length != 9) {
                alert("Please enter a valid Emp Id.");
            }
        }

        $("#empId")
                .autocomplete(
                        {
                            source : function(request, response) {

                                $.ajax({
                                    url : "${findEmployeesByEmpIdIdUrl}"
                                            + "?t=" + getTimestamp()
                                            + "&hcAsOnDate=" + hcAsOnDate,
                                    datatype : "json",
                                    data : {
                                        dbPrismId : request.term
                                    },
                                    success : function(data) {
                                        response($.map(data, function(item) {
                                            return {
                                                label : item.dbPrismId,
                                                value : item.dbPrismId,
                                                id : item.id + "_"
                                                        + item.forecast
                                            };
                                        }));
                                    }
                                });
                            },
                            minLength : 1,
                            select : function(event, ui) {
                                var employeeId = ui.item.id;


                            },
                            open : function() {
                                $(this).removeClass("ui-corner-all").addClass(
                                        "ui-corner-top");
                            },
                            close : function() {
                                $(this).removeClass("ui-corner-top").addClass(
                                        "ui-corner-all");
                            }
                        });

    });
</script>

<form action="save" method="POST" name="employeeForm" id="employeeForm">
    <input type="text" name="empId" id="empId" maxlength="9" onchange="validateEmpId(this.value);" class="input-txt" />
</form>

html onchange
person ashishjmeshram    schedule 09.07.2012    source источник
comment
Какой у вас код для автоматического поиска?   -  person WolvDev    schedule 09.07.2012
comment
@ShogunArts.de. Пожалуйста, смотрите, я обновил свой вопрос.   -  person ashishjmeshram    schedule 09.07.2012

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте сделать это внутри вашей функции выбора:

select: function(event, ui) {
    if (validateEmpId(ui.item.id)) self.location.href='?site=whatever&id=' + ui.item.id;
    else alert("Please enter a valid Emp Id.");  
}


function validateEmpId(empId) { 
    empId = $.trim(empId); 
    empId = empId.replace(/\s/g, ""); 
    if (empId.length != 9) return false;
    else return true;
}
person WolvDev    schedule 09.07.2012
comment
Функция select вызывается после отображения предупреждения о проверке. - person ashishjmeshram; 09.07.2012
comment
Затем проверьте, когда выбор сделан, и когда он правильный, выполните location.href, иначе появится предупреждение об ошибке. (Отредактировал мой пост с примером) - person WolvDev; 09.07.2012
comment
ShogunArts.de Идентификатор emp также можно ввести вручную. Как мне проверить такой идентификатор emp. Для этого я вызвал метод проверки для события onchange текстового поля. - person ashishjmeshram; 09.07.2012
comment
Нет, по событию onsubmit :) При использовании автозаполнения события не будет. Даже когда вы выбираете НЕТ события отправки. Поэтому вам нужно проверять, когда вы выбираете идентификатор, но когда вы вводите вручную, вам нужно проверять отправку. - person WolvDev; 09.07.2012
comment
Мне нужно дать пользователю предупреждение о проверке, как только он введет идентификатор emp. Я не могу дождаться, пока пользователь заполнит всю форму, а затем отправит форму. Emp id — самое важное поле в форме, и если оно недействительно, мне нужно сообщить им об этом как можно скорее. Отсюда и событие onchange. Но, к сожалению, у автоматического поиска есть проблемы с onchange. Есть ли другой способ? - person ashishjmeshram; 09.07.2012