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方法处理所有内容。

在多个表单的ajax表单提交之前进行Jquery验证

3 个答案: