在引導模式彈出之前驗證表單

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
    }