在按钮上单击弹出正在打开

Question

我有一种情况，我想在单击button验证textbox 。 我想要的是

我有一个textbox和button如果用户未在文本框中输入任何值，然后单击按钮，则在输入详细信息时会提示消息。 它一直发生到这里。

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

<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是您的弹出窗口附加到click事件的#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'
    });

}

并删除点击处理程序。