Question

我想要在textbox点击时验证button。我想要的是

我有一个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的点击事件。要防止该弹出窗口，首先验证输入是否为空，然后编写弹出窗口的代码。

e.g。

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'
    });

}

删除点击处理程序。

在按钮上单击弹出即可打开

1 个答案: