如何在jQuery中提交之前通过ajax验证表单？

问题描述：

...submit(function() { 
    $.post(...,function() { 
     validate(); 
    }) 
});

但事实证明的形式直接提交...

答

你必须抓住每一个元素，并通过您的验证运行它，然后稍后提交表格。

使用$(id).value（对于id-d元素）或yourForm.someElementName.value（对于名称为d的元素，假设您的表单为name和yourForm）。

答

你需要阻止默认表单提交

http://api.jquery.com/event.preventDefault/

$("form").submit(function(event){ 
    event.preventDefault(); 
    if(valid()) 
    { 
    $.post . . . 
    } 
});

我以某种方式感觉他在做服务器端验证..即提交表单两次：一次用于验证，一次用于实际处理。国际海事组织这是可怕的（但struts-jquery插件也做这样的事情）;请参阅我的答案以获得更好的客户端验证解决方案。 – ThiefMaster 2010-11-19 01:46:29

是的，我正在做服务器端验证。 – ajx 2010-11-19 02:32:53

答

看一看的jQuery Validation Plugin。

下面是一个例子就如何可以使用：

$("#myForm").validate({ 
    rules: { 
     command: 'required' 
    }, 

    messages: { 
     command: 'Please enter a command.' 
    }, 

    submitHandler: function(form) { 
     $(form).ajaxSubmit({ 
      success: function(data) { /* ... */ }, 
      url: form.action, 
      dataType: 'json' 
     }); 
    } 
});

它支持服务器端验证吗？ – ajx 2010-11-19 02:36:44

不，通常正确的方法是首先进行客户端验证，因为它更快，然后*提交表单，或者返回成功响应（可能会重定向用户）或错误，然后处理通过你的成功回调。如果大多数客户端启用了JavaScript，服务器端验证可能会像返回“某些字段无效”一样简单 - 就像错误一样，并依靠客户端验证冗余错误 – ThiefMaster 2010-11-19 11:44:55

+1来验证客户端。 99％的客户确实启用Javascript，因此可以处理客户端的漂亮和有意义的验证错误。在某些情况下，您没有选择，但必须在服务器端复杂的业务逻辑（即访问Db等） – 2013-07-12 09:02:17

答

如果你想AJAXily做服务器端验证，而无需缴纳形式到另一个页面，你可以做这样的事情。您可以改为将“提交”按钮设为“按钮”类型，而不是将验证操作绑定为提交，然后将验证绑定到其单击事件。一旦它通过验证，那么你可以继续前进。

例如：

$('#myPseudoSubmitButton').click(function() { 
    // Send the form to the server side for validation 
    $.post('validation_script.php', { form inputs here }, function(data) { 
      if (data.validated) { 
       // Perform some functionality that happens when the form validates 
      } 
      else { 
       // Display an error message to the user 
      } 
    }); 
}, 'json');

这当然前提是你的验证脚本返回JSON格式的数据与“验证”属性。

如何在jQuery中提交之前通过ajax验证表单？

相关推荐