Question

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

jQuery

<!--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>

表格

download

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);
        });
    }
});

Answer 2

由于在表单提交时自动调用验证器在这种情况下，不提交任何表格。

将ajax调用放入submitHandler。

或使用

if (!$("#edit_profile").valid()) {
return false;
}

之前

e.preventDefault();

Answer 3

我认为您应该将提交的代码放入传递给submitHandler的对象的.validate()属性中。看看文档：

https://jqueryvalidation.org/validate/

您发布的代码在语法上不正确，因为您将$().on('click')内容放在传递给.validate()的对象中。

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

3 个答案: