在AJAX提交之前进行jQuery验证

时间:2012-07-28 19:21:56

标签: jquery ajax validation jquery-validate

我有一个简单的注册表单,其中包含以下jQuery验证代码:

$(document).ready(function(){

    $("#registerForm").validate({

    rules: {

    Username: {required: true, minlength: 6},   
    Password: {required: true, minlength: 6},
    re_Password: {required: true, equalTo: "#Password"} 

    },

    });     
});

在我提交表单之前,它会正确验证。

当我想要对表单进行AJAX提交时,问题就出现了,因为表单不再验证并提交而不进行验证:

<form id="registerForm" action="register.php" method="post" onsubmit="xmlhttpPost('register.php', 'registerForm', 'signup-box'); return false;">

默认有效:

<form method="post" id="registerForm" action="register.php">

如果有人能指出我正确的方向或给我一些起点来解决这个问题,我将不胜感激。

感谢。


感谢Kundan Singh Chouhan我找到了解决方案,将以下代码添加到document.ready块中:

$("#registerForm").submit(function(){

    if($("#registerForm").valid()){

        xmlhttpPost('register.php', 'registerForm', 'signup-box'); 

   }

return false;

});

3 个答案:

答案 0 :(得分:2)

我认为您应该使用JQuery Validator的提交处理程序,如下所示:

$('#id_of_form').validate(){

    // rules and messages

    submitHandler: function(form) {

    // place your code for Ajax Request here...

    }
}

答案 1 :(得分:0)

我认为您必须从表单标记中删除onsubmit事件,并在document.ready()中编写以下脚本

$("form").submit(function(){
   if($("form").validate()){
      xmlhttpPost('register.php', 'registerForm', 'signup-box'); 
   }
   return false;
});

希望这能解决您的问题。

答案 2 :(得分:0)

您可以使用jQuery.Validation这里有一些示例代码:

@POST
@Produces({MediaType.TEXT_PLAIN})
@Path("/create")
public Response create(@FormParam("city") String city, 
           @FormParam("poi1") String poi1,
        @FormParam("poi2") String poi2) {
checkContext();
String msg = null;
// Require both properties to create.
if (city == null || poi1 == null || poi2 == null) {
    msg = "Property 'city' or 'poi1' or 'poi2' is missing.\n";
    return Response.status(Response.Status.BAD_REQUEST).
                                       entity(msg).
                                       type(MediaType.TEXT_PLAIN).
                                       build();
}       
// Otherwise, create the Place and add it to the collection.
int id = addPlace(city, poi1, poi2);
msg = "Place " + id + " created: (city = " + city + " poi1 = " + poi1 + " poi2 = " + poi2 + ").\n";
return Response.ok(msg, "text/plain").build();
}

问候。