jquery - 如何使用 jQuery 验证插件验证表单？

Question

我有一个使用 ajax 将数据提交到数据库的表单。我正在尝试使用 jQuery validation 验证表单字段但我根本无法让它工作。表单似乎忽略了验证代码。谁能告诉我我做错了什么？非常感谢。

jQuery

$(document).ready(function() {
    $("#message").hide();


    $("#edit_profile").validate({   //Validate

        //validation rules go here
        rules: {
            user_name: {
                required: true
            },
            user_email: {
                required: true,
            }
        },
    messages: {
            user_name: "error.",
            user_email: "error."
        },
        //End Validation

    $("#submit").on("click", function(e) {

            e.preventDefault();

    var formdata = $(this.form).serialize();
            $.post('update_profile.php', formdata,
                function(data) {
                    $("#message").html(data);
                    $("#message").fadeIn(500);
                    $("#message").fadeOut(500);
                });
        });

        return false;
    });
});

表格

<!--FORM STARTS HERE--->

 <div class="form-group">
 <form class="" action="" id="edit_profile"  method="post">
              <label>
                Name
              </label>
              <input id="user_name" name="user_name" type="text" placeholder="<?php echo $user_name ; ?>" value="<?php echo $user_name ; ?>" class="form-control input-md"
              >
            </div>
           <div class="form-group">
              <label>
                Email
              </label>
              <input id="user_email" name="user_email" type="text" placeholder="<?php echo $user_email; ?>" value="<?php echo $user_email; ?>" class="form-control input-md"
              required="">
            </div>
             <button type="submit" class="btn btn-small btn-green pull-right" id="submit">

              Save
            </button>
   </form>
   <!--FORM ENDS HERE--->
<div id="message"></div>

Answer 1

在看到您的代码中的一些缺陷后，我会写一个正确的答案。

使用submitHandler属性传递一个函数，该函数将在表单有效时执行。

该函数带有两个参数 form 元素和 event 实例，您可以将其用于 AJAX 调用。

$("#edit_profile").validate({  
    rules: {
        user_name: {
            required: true
        },
        user_email: {
            required: true,
        }
    },
    messages: {
        user_name: "error.",
        user_email: "error."
    },
    submitHandler: function (form, e) {
        e.preventDefault();
        $.post('update_profile.php', $(form).serialize(), function(data) {
            $("#message").html(data);
            $("#message").fadeIn(500);
            $("#message").fadeOut(500);
        });
    }
});