在表单提交上显示 Twitter Bootstrap 模式

我试图在提交表单时显示模式，并满足某些条件，例如：

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

jsfiddle：jsFiddle 链接 http://jsfiddle.net/kc8zb/3/

<div id="modal-3" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

        <h3 id="myModalLabel">Modal header</h3>
    </div>

    <div class="modal-body">
        <p>do you want to save partial info</p>
    </div>

    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true" id="finishNow">Finish Now</button>
        <button class="btn btn-primary" data-dismiss="modal" id="doItLater">Do It Later</button>
    </div>
    </div>
</div>


    <a href="#modal-3" role="button" class="btn" data-toggle="modal" id="confirmButton">Confirm</a>



<form name="asd" action="asdd" name="formName" id="refrenceSubmit" >
<input type="text" name="name11" id="nameField" value=""/>
<input type="text" name="name22"id="phoneField" value=""/>
<input type="submit" name="name33"value="Submit" />
</form>

js:

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

                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");
                    return false;
                }else if(inputFieldsCount<2){
                       $('#confirmButton').click()
                       $('#showModelContainer').show()
                       $('#doItLater').click("click",function (e) {
                       $('#refrenceSubmit').submit()
                        }
                     });
                     return false;
                }
            });
        });

编辑的 JavaScript:

$(function(){
            $("#submitAndContinue").click(function(evt){

                var inputFieldsCount=0;
                $('.refrenceSubmit').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(inputFieldsCount<5){

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

            $('#doItLater').on("click",function (e) {
              $('#saveAndContinue').val('saveAndContinue');
              $('.refrenceSubmit').submit();
            });
        });

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

• http://jsfiddle.net/kc8zb/9/ http://jsfiddle.net/kc8zb/9/

Code:

$(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();
            });

        });

目前尚不清楚您想做什么，但这应该为您提供一个起点。如果您想挂钩到模式，您可以绑定到模式按钮上的单击事件，或者您可以监视模态关闭事件 https://stackoverflow.com/questions/8363802/bind-a-function-to-twitter-bootstrap-modal-close.

另外，请注意，不推荐使用返回 false 来取消提交事件。而是使用防止默认 https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false.