【问题标题】:bootbox.prompt() Confirm form submission usingbootbox.prompt() 使用确认表单提交
【发布时间】:2017-08-23 03:35:35
【问题描述】:

如果有人在文本框中输入错误的文本,我想阻止表单提交。我只想让用户输入 done 然后提交表单,否则会显示错误消息。在我下面的代码不起作用它不会阻止表单提交。

$('#delete_btn').click(function(event) {
        event.preventDefault();
        bootbox.prompt("Are you sure you want to done the record?<br/>Write 'done' below to confirm!", function(result) {
            if(result !== null)
                result = result.toLowerCase();
            if(result === 'done') {
            } else {
                alert('please enter something in textbox');
            }
        });
    });

【问题讨论】:

  • 这里没有表格。另外,什么是“done_btn”?尝试包含足够多的标记来展示您所看到的行为。
  • 如果没有输入“done”,你是问如何防止提示对话框关闭?
  • 感谢@TiesonT。当然是的

标签: jquery twitter-bootstrap twitter-bootstrap-3 bootbox


【解决方案1】:

如果您希望对话框保持打开状态,请在回调中添加 return false,ergo:

$('#delete_btn').click(function(event) {
    event.preventDefault();

    bootbox.prompt("Are you sure you want to done the record?<br/>Write 'done' below to confirm!", function(result) {
        if(result !== null){
            result = result.toLowerCase();

            if(result === 'done') {
                /* submit your form */
            } else {
                alert('please enter something in textbox');

                return false;
            }
        }
    });
});

你也可以一直返回false,然后在成功状态下手动关闭提示:

$('#delete_btn').click(function(event) {
    event.preventDefault();

    bootbox.prompt("Are you sure you want to done the record?<br/>Write 'done' below to confirm!", function(result) {
        if(result !== null){
            result = result.toLowerCase();

            if(result === 'done') {
                /* submit your form, then... */
                bootbox.hideAll();

                // or $('.bootbox').modal('hide');
            } else {
                alert('please enter something in textbox');
            }
        } else {
            bootbox.hideAll();
        }
    });


    return false;
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-10-19
    • 2017-01-20
    • 1970-01-01
    • 2011-09-23
    • 2020-11-30
    • 2019-10-14
    相关资源
    最近更新 更多