在 Bootstrap 模式弹出窗口之前验证表单

Question

在 php 文件中，我有简单的形式和引导模式。单击提交按钮后，将显示引导模式。

形式是：

我需要验证上述表单字段。如果成功，那么我需要显示模态并验证这些字段。

模态是：

我的代码是：

    <div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h3 class="modal-title" id="lineModalLabel">Fill Below Details</h3>
            </div>
            <div class="modal-body">
                <div class="main-login pop-up-form">
                        <form class="" method="post" action="#"><br>

                            <div class="form-group">
                                <div class="cols-sm-10">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                                        <input type="text" class="form-control" name="name" id="name"  placeholder="Enter your Name"/>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="cols-sm-10">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
                                        <input type="text" class="form-control" name="email" id="email"  placeholder="Enter your Email"/>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="cols-sm-10">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
                                        <input type="text" class="form-control" name="username" id="username"  placeholder="Enter your Address"/>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="cols-sm-10">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span>
                                        <input type="text" class="form-control" name="username" id="username"  placeholder="Enter your Phone No"/>
                                    </div>
                                </div>
                            </div>



                            <div class="form-group ">
                                <a href="#" target="_blank" type="button" id="button" class="btn btn-primary btn-lg btn-block login-button">CLICK For Enquiry</a>
                            </div>

                        </form>
                    </div>

            </div>
            <div class="modal-footer">
                <div class="btn-group btn-group-justified" role="group" aria-label="group button">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-default" data-dismiss="modal"  role="button">Close</button>
                    </div>
                    <div class="btn-group btn-delete hidden" role="group">
                        <button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal"  role="button">Delete</button>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>

表格代码如下：

                            <div class="form-group">
                                <div class="cols-sm-10">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                        <input type="date" class="form-control" name="udate" id="udate"  placeholder="ghf" style="height: 39px !important;"  />
                                    </div>
                                </div>
                            </div>


                            <div class="form-group">
                                <div class="cols-sm-10 food">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
                                        <select name="ftime" id="ftime">
                                            <option value="">---Select---</option>
                                            <option value="1">Breakfast</option>
                                            <option value="2">Lunch</option>
                                            <option value="3">Dinner</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="cols-sm-10 food">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
                                        <select id="ftype" name="ftype" onchange="validate()">
                                            <option value="">--select--</option>
                                            <option value="hai">V</option>
                                            <option value="hai">NV</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="cols-sm-10">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-money fa" aria-hidden="true"></i></span>
                                        <input type="text" class="form-control" name="amount" id="amount"  placeholder="hai" readonly="readonly" />
                                    </div>
                                </div>
                            </div>


                            <div class="form-group ">
                                <a href="#" data-toggle="modal" data-target="#squarespaceModal" type="button" id="button" class="btn btn-primary btn-lg btn-block login-button" onclick="
                                validate2()">Submit</a>
                            </div>

                        </form>

我无法同时验证表单和模式。请帮我解决这个问题.. 提前致谢

Answer 1

你可以写一个简单的验证方法

一个例子可以是......

function checkValidation()
{
    var isValid = true;
    if($("#date").val() == null){
        isValid = false;
    }
    if($("#person").val() == null){
        isValid = false;
    }
    if($("#mail").val() == null){
        isValid = false;
    }
    return isValid;
}
if(checkValidation())
    $("#modalDialog").show();
else
    alert("Form is not valid");

Answer 2

试试这个代码：

首先将单击侦听器附加到您的表单提交按钮，并在单击按钮时验证您的表单，如果验证成功，则您可以显示您的模式。

    $(document).on('click', '#submit', function(e){
        e.preventDefault();
        var validated = validateform();
        if(validated){
            $('#modal').modal('show');
        }
    });

在此函数中编写您的验证逻辑，如果验证通过测试，则返回 true。

    function validateform(){
        // logic for form validation
        // return true if validated successfully
    }