javascript - 在按钮上单击弹出窗口正在打开

Question

我有一个场景，我想在单击按钮时验证文本框。我想要的是

我有一个文本框和按钮，如果用户不在文本框中输入任何值并单击按钮，它应该在输入详细信息时提示一条消息。事情发生到这里。

但同时，即使用户没有输入任何详细信息，弹出窗口也会打开。所以我希望它停止。下面是我尝试过的代码。

<input type="text" name="search" id="txtStoreCode" />
<input type="button" value="View Details" id="viewDetails" class="headButt" onclick="getStoreInfo();" />

正在打开的弹出窗口。

$('#viewDetails').on('click', function() {
    $("#storeCodeDialog").dialog({
        width: 'auto',

    });

    $("div[aria-describedby='storeCodeDialog'] .ui-dialog-title").text('3328');

    $('div[aria-describedby="storeCodeDialog"]').css({
        'left': '18px',
        'top': '103px'
    });

});

我的验证函数如下

var STORE_ID = $('#txtStoreCode').val();
if (STORE_ID == "" || STORE_ID == null) {
    jAlert('Kindly enter Store Id', 'INFORMATION');
    $('#storeCodeDialog').hide();
    return false;
}

我尝试使用 hide() 但仍然弹出窗口打开如何停止它。

Answer 1

因为如果#viewDetails，您的弹出窗口会附加到点击事件。为了防止弹出窗口，请首先验证输入不为空，然后编写弹出窗口的代码。

例如

function getStoreInfo() {
    var STORE_ID = $('#txtStoreCode').val();

    if (STORE_ID == "" || STORE_ID == null) {
        jAlert('Kindly enter Store Id', 'INFORMATION');
        $('#storeCodeDialog').hide();
        return false;
    }
    // This will execute if store id is not empty.
    $("#storeCodeDialog").dialog({
        width: 'auto',
    });

    $("div[aria-describedby='storeCodeDialog'] .ui-dialog-title").text('3328');

    $('div[aria-describedby="storeCodeDialog"]').css({
        'left': '18px',
        'top': '103px'
    });

}

并删除点击处理程序。