Javascript 在表单提交时显示Twitter引导模式

我试图在提交表格时显示模态，并附带一些条件，例如：

表单有两个文本字段，如果其中一个已填写，则会向用户显示一些信息，如果两个字段均未填写，则表单不会提交 为此我做了这件事，但没有成功

jsfiddle：

js:

编辑的JAVASCRIPT：

---

我只是稍微修改了你的代码

代码将在提交时打开模式。。。看看

$(function(){
     $('form').on('submit', function () {                   
          $('#modal-3').modal('show');
          return false;
     });
 });

下面是修正：我稍微改变了你的目标：

(function () {
    var confirmSubmitManager = {
        init: function () {
            this.submitButton = null;
            this.confirmButton = null;
            this.modalContainerView = null;
            this.isFormPrestine = false;
            this.form = null;
            this.inputs = [];

            this.cache();
            this.bindEvents();
            return this;
        },
        cache: function() {
            this.submitButton = $("input[type=submit]");
            this.confirmButton = $("#doItLater");
            this.modalContainerView = $("#modal-3");
            this.inputs = $("#refrenceSubmit > input[type=text]");
            this.form = $("#refrenceSubmit");
        },
        bindEvents: function () { // attach event handlers

            this.submitButton.on('click', this.validateSubmit);
            this.confirmButton.on('click', this.confirm);
        },
        validateSubmit : function() {
            var self = confirmSubmitManager;
            var dirtyInputs = 0;

            for (var input in self.inputs) {

                if ($(self.inputs[input]).val() == "") {
                    dirtyInputs++;
                }
            }

            if (dirtyInputs > 0) {
                alert("You must fill in at least one field");
                self.isFormPrestine =  false;

            } else {
                 self.isFormPrestine =  true;
            }                      
            // incase the inputs are pristeen
            self.modalContainerView.modal('show');
            return false;
        },
        confirm: function () {
            var self = confirmSubmitManager;
            if(self.isFormPrestine)
               self.form.submit();
        }
    };
    window.load = confirmSubmitManager.init();
})(jQuery);

---

我只是稍微修改了你的代码

代码将在提交时打开模式。。。看看

$(function(){
     $('form').on('submit', function () {                   
          $('#modal-3').modal('show');
          return false;
     });
 });

下面是修正：我稍微改变了你的目标：

(function () {
    var confirmSubmitManager = {
        init: function () {
            this.submitButton = null;
            this.confirmButton = null;
            this.modalContainerView = null;
            this.isFormPrestine = false;
            this.form = null;
            this.inputs = [];

            this.cache();
            this.bindEvents();
            return this;
        },
        cache: function() {
            this.submitButton = $("input[type=submit]");
            this.confirmButton = $("#doItLater");
            this.modalContainerView = $("#modal-3");
            this.inputs = $("#refrenceSubmit > input[type=text]");
            this.form = $("#refrenceSubmit");
        },
        bindEvents: function () { // attach event handlers

            this.submitButton.on('click', this.validateSubmit);
            this.confirmButton.on('click', this.confirm);
        },
        validateSubmit : function() {
            var self = confirmSubmitManager;
            var dirtyInputs = 0;

            for (var input in self.inputs) {

                if ($(self.inputs[input]).val() == "") {
                    dirtyInputs++;
                }
            }

            if (dirtyInputs > 0) {
                alert("You must fill in at least one field");
                self.isFormPrestine =  false;

            } else {
                 self.isFormPrestine =  true;
            }                      
            // incase the inputs are pristeen
            self.modalContainerView.modal('show');
            return false;
        },
        confirm: function () {
            var self = confirmSubmitManager;
            if(self.isFormPrestine)
               self.form.submit();
        }
    };
    window.load = confirmSubmitManager.init();
})(jQuery);

---

JSFIDLE中的原始HTML代码隐藏了modal的封闭容器。另外，JavaScript中存在语法错误。下面是一个新的JSFIDLE，它修复了这些问题，还展示了如何触发模态，然后在单击模态中的按钮时手动提交

代码：

你想做什么还不清楚，但这应该给你一个起点。如果您想挂接到模式，可以绑定到模式按钮上的单击事件，也可以监视事件

---

另外，请注意，不推荐使用返回false来取消提交事件。改为使用。

JSFIDLE中的原始HTML代码隐藏了modal的封闭容器。另外，JavaScript中存在语法错误。下面是一个新的JSFIDLE，它修复了这些问题，还展示了如何触发模态，然后在单击模态中的按钮时手动提交

代码：

你想做什么还不清楚，但这应该给你一个起点。如果您想挂接到模式，可以绑定到模式按钮上的单击事件，也可以监视事件

---

另外，请注意，不推荐使用返回false来取消提交事件。改为使用。

1实际上，当我提交表单时，它会检查任何字段是否为空并显示相关消息。正在工作..2当我提交表单时，我的代码会显示模型，唯一的问题是它自动提交表单我没有机会单击模型按钮以便提交表单。1实际上，当我提交表单时，它会检查任何字段是否为空并显示相关消息。正在工作..2提交表单时，我的代码会显示模型，唯一的问题是它会自动提交表单。我没有机会单击模型按钮以便提交表单。请注意，正确的术语是模态，而不是模型。在标题中使用模态可能会在将来的问题中得到更好的回答，因为模型通常意味着完全不同的东西。在这个问题上，我为你们改变了这个说法。请注意，正确的术语是模态，而不是模型。在标题中使用模态可能会在将来的问题中得到更好的回答，因为模型通常意味着完全不同的东西。我在这个问题上为您更改了。单击“模型”按钮后，表单将不会提交。我只需要知道，如果任何字段为空，然后询问用户是否希望立即填写条目现在完成，还是以后再填写。请查看我编辑的问题，即我尝试在“其他iInputFieldsCount”中简化表单基于您的建议，我实现了我想要的。非常感谢你。单击“模型”按钮后，表单将不会提交。我只需要知道，如果任何字段为空，然后询问用户是否希望填写条目立即完成，还是稍后再完成。请查看我编辑的问题，即我尝试在“其他iInputFieldsCount”中将其简化基于你的建议，我实现了我想要的。非常感谢你。

(function () {
    var confirmSubmitManager = {
        init: function () {
            this.submitButton = null;
            this.confirmButton = null;
            this.modalContainerView = null;
            this.isFormPrestine = false;
            this.form = null;
            this.inputs = [];

            this.cache();
            this.bindEvents();
            return this;
        },
        cache: function() {
            this.submitButton = $("input[type=submit]");
            this.confirmButton = $("#doItLater");
            this.modalContainerView = $("#modal-3");
            this.inputs = $("#refrenceSubmit > input[type=text]");
            this.form = $("#refrenceSubmit");
        },
        bindEvents: function () { // attach event handlers

            this.submitButton.on('click', this.validateSubmit);
            this.confirmButton.on('click', this.confirm);
        },
        validateSubmit : function() {
            var self = confirmSubmitManager;
            var dirtyInputs = 0;

            for (var input in self.inputs) {

                if ($(self.inputs[input]).val() == "") {
                    dirtyInputs++;
                }
            }

            if (dirtyInputs > 0) {
                alert("You must fill in at least one field");
                self.isFormPrestine =  false;

            } else {
                 self.isFormPrestine =  true;
            }                      
            // incase the inputs are pristeen
            self.modalContainerView.modal('show');
            return false;
        },
        confirm: function () {
            var self = confirmSubmitManager;
            if(self.isFormPrestine)
               self.form.submit();
        }
    };
    window.load = confirmSubmitManager.init();
})(jQuery);

$(function(){
            $("#refrenceSubmit").submit(function(evt){

                var inputFieldsCount=0;
                $(this).find('input[type=text]').each(function(){
                    if($(this).val() != "") inputFieldsCount+=1;
                });

                if(!inputFieldsCount){
                    alert("You must fill in at least one field");
                    evt.preventDefault();
                }else if(($('#nameField').val()=="")&&
                         ($('#phoneField').val()!="")){

                   $('#modal-3').modal('show');
                   evt.preventDefault();
                }
                else {
                    $('#modal-3').modal('hide'); //in-case is showing
                }


            });

            $('#doItLater').click("click",function (e) {
              $('#nameField').val("not clear what you intended, but this sets value in name field");
              $('#refrenceSubmit').submit();
            });

        });