模態確認中的表單驗證

Question

這是我的代碼。 問題是，當我單擊模式上的確認按鈕時，表單正在提交。 問題是我不知道如何在提交之前先驗證表單。 這是我想要的過程。
1.用戶填寫該字段。
2.用戶單擊確認按鈕（至少在此必須驗證表單）或在此處3.模態顯示，當我單擊提交按鈕時，模態將關閉，然后將顯示表單驗證

 <form role="form" id="formfield" action="<?php echo base_url()?>Shop/add_shop" method="post"    enctype="multipart/form-data">

    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <p><B>Shop name:</b></p>
            <input type="text" class="form-control"  id ="shop_name" name="shop_name">
        </div>
        <div class="col-md-1"></div>
    </div>

<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                Confirm Submit
            </div>
            <form action="<?php echo base_url()?>Shop/add_shop" id="wew" method="post">
            <div class="modal-body">
                Are you sure you want to submit the following details?
                <table class="table">
                    <tr>
                        <th>Shop Name: </th>
                        <td ><input type="text " id="s_name" name="shop_name" readonly></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button href="#"  onclick="document.getElementById('formfield').submit();" class="btn btn-success success">Submit</button>
            </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('#submitBtn').click(function() {
         $('#s_name').val($('#shop_name').val());
    });

    $('#submit').click(function(){

        $('#formfield').submit();
    });
</script>

Answer 1

您需要處理表單提交事件，並在那里進行驗證。

在下面的示例中，除非isValid為true否則不會提交表單

$("form").submit(function(event) {
  isValid = false; // form is not valid
  if(isValid != true) event.preventDefault(); // prevent the submission
});

您可以像這樣確定一個字段是否為空：

if($("input[name=shop_name]").val() == '') alert('Shop name cannot be empty!');

還有一些非常好的預構建的驗證庫。 我個人最喜歡的是validate.js，可從http://jqueryvalidation.org/獲得。使用這樣的預構建庫，您可以簡單地執行$("form").validate(); 如果您不喜歡自定義規則，可以很容易地對其進行擴展。