在多個表單的ajax表單提交之前進行Jquery驗證

Question

雖然我搜索了一個常見的問題並嘗試了所有命中和試用..但沒有用..仍然jjery驗證的問題在ajax調用之前仍然存在..表單正在提交而沒有任何驗證

請提供我可能出錯的任何信息

<script type="text/javascript">
    $(document).ready(function () {


    $('#myform').validate({ 

                    rules: {
                        objective: {
                            required: true,
                            minlength: 150
                        },
                    },

                submitHandler: function ()
                    {
                            var dataString = $("#myform").serializeArray();
                            $("#flash").show();
                            $.ajax({
                                url: "xyz.php",
                                type: "POST",
                                data: dataString,
                                cache: false,
                                async: false,
                                error: function (jqXHR, textStatus, errorThrown) {
                                    alert('error');
                                },
                                success: function (data) {
                                    $("#flash").hide();
                                        $('#info').html(data.objective);
                                        $('.success').fadeIn(200).show();
                                    $("#objective").focus();
                                }
                            });
                            return false;

                    }
            });

    });
</script>

HTML

<form class="form-horizontal " name="myform" id="myform"  action="include/process.php" method="post">


          <div class="form-group">
            <label for="objective" class="col-lg-3 control-label">Objective</label>
            <div class="col-lg-9">
              <textarea class="form-control" rows="6" id="objective" name="objective" placeholder="Objective" ></textarea>
               </div>
          </div>
          <div class="form-group">
            <div class="col-lg-12">
              <button type="submit"  id="editbtn" class="btn btn-sm btn-success  pull-right hovertip"  data-toggle="tooltip"  data-original-title=" Add ">Add Data</button>
              </div>
          </div>

      </form>

在同一頁面上還有三個類似的表格......

Answer 1

在點擊處理程序的開頭添加e.preventDefault 。

$("#editbtn").click(function (e) {
    e.preventDefault();
    // rest of the code.
}

它將阻止您的表單在不通過您的js代碼的情況下發送。

Answer 2

您可以執行@Romain所說的內容或將HTML更改為：

<input type="button" id="editbtn" class="btn btn-sm btn-success  pull-right hovertip"  data-toggle="tooltip"  data-original-title=" Add " value="Add Data" />

所以表格不提交

Answer 3

如果您要通過JavaScript觸發提交，則可以將按鈕鍵入“按鈕”，而不是提交：

<button type="button"  id="editbtn" class="btn btn-sm btn-success  pull-right hovertip"  data-toggle="tooltip"  data-original-title=" Add ">Add Data</button>

這將阻止執行默認提交操作，並允許您通過onclick方法處理所有操作。