在ajax帖子上使用jQuery Form Validator验证表单（）

Question

我正在使用表单验证器插件来验证我的表单。

如果我不使用jQuery post方法提交数据，它将正常工作。 在使用jQuery post时，它不会在提交时验证表单。

我的代码是

<form action="UpdatedProfile" method="post" name="updateprofile" id="UpdatedProfile" class="form-horizontal">
<div class=" form-group ">
          <div class="col-lg-2">
                <label>First Name</label>
          </div>
          <div class="col-lg-4">
              <input type="text" name="fname" cssClass="form-control" data-validation="required" data-validation-error-msg="First Name is required"/>
        </div>
    </div>
   </form>

<script>
            $(document).ready(function () {
                $.validate();
                $(document).on('click', '#submit', function (event) {
                    event.preventDefault();
                    console.log($('#UpdatedBasicProfile').serialize());
                    $.post("Updated", $('#UpdatedProfile').serialize(), function (data)
                   {....});
          });
         });
  </script>

如何实现呢？

Answer 1

在表单中放置一个提交按钮，并在js中定义验证规则，例如

$('#frm_registration').validate({
    rules:
    {
        fname: required
    },
    messages:
    {
        fname : 'Please enter name'
    }
});

或者，如果按钮属于按钮类型，则在单击时启动验证，例如：

$('#btn').click(function(){
    $('#frm_registration').valid();     // will initiate the validation
})

Answer 2

如果单击提交按钮时验证程序正在工作，则可以在按钮上触发单击事件，而不是侦听文档中是否有任何单击，并且目标是给定的按钮。