0

フォームを含むJSPページがあります。

フォームには、テキストフィールド、ラジオボタンなどを含む多くのフィールドがあります。

empidという特別なフィールドがあります。これはテキストフィールドです。

このempidは9文字の長さである必要があります。9文字未満または9文字を超える場合は、入力したempidが無効であることをユーザーに警告するメッセージを表示する必要があります。

このフィールドのonchangeイベントで発生するこのフィールドを検証するためのjavascriptメソッドを作成しました。

今、私はこのフィールドを自動ルックアップとして作成しました。したがって、ユーザーは最初の数桁を入力してから、[empid]フィールドに入力された既存のempidのリストを表示できます。

これは、自動ロクップが一般的にどのように機能するかとほぼ同じです。

問題は、ユーザーが自動ルックアップからemp idを選択しようとすると、マウスポインターがテキストフィールドの外に移動するため、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>
4

1 に答える 1

0

select 関数内でこれを実行してみてください。

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;
}
于 2012-07-09T12:50:52.863 に答える