jQuery使用event.preventDefault()验证插件

时间:2022-11-23 00:03:05

I have a page that has a Contact Form slide down when a link is clicked (i.e. it is a div on the page that displays with .slideDown('slow')

我有一个页面,当点击一个链接时,它会向下滑动一个联系表格(即它是一个以.slideDown('slow')显示的页面上的div

I have the jQuery validation plugin working on the contact form, only I noticed that when I was testing I had event.preventDefault(); commented out. In the final version I want that to be uncommented because I don't want the page to redirect or even post when Submit is clicked.

我有jQuery验证插件在联系表单上工作,只有我注意到,当我测试时,我有event.preventDefault();评论说。在最终版本中,我希望取消注释,因为我不希望页面重定向,甚至在单击“提交”时发布。

I have the Submit button sending an Ajax post to send the email. How can I retain this functionality and still use jQuery's validate plugin?

我有提交按钮发送Ajax帖子来发送电子邮件。如何保留此功能并仍然使用jQuery的验证插件?

1 个解决方案

#1


1  

Instead of setting an action on the form $.bind() a click handler to the forms submit button and use $.post() to make the post request. A few words of caution though. First, you should probably set the action on the form and let it redirect by default for people that have Javascript disabled, then use jQuery to remove the action from the form and to $.bind() the click handler to the submit button when the page loads. Second, in my code when I say to use alert or some other accessible notification, I mean use the alert() method or if you use a dom element to contain the notification, make sure you use WAI-ARIA live region and roles attributes to make the notification accessible to assistive devices.

而不是在表单$ .bind()上设置一个操作,而是单击处理程序到表单提交按钮并使用$ .post()来发出请求。但要谨慎一些。首先,你应该在表单上设置动作,默认情况下让它为已禁用Javascript的人重定向,然后使用jQuery从表单中删除动作,并使用$ .bind()单击处理程序到提交按钮页面加载。其次,在我的代码中,当我说使用alert或其他一些可访问的通知时,我的意思是使用alert()方法,或者如果你使用dom元素来包含通知,请确保使用WAI-ARIA实时区域和角色属性使辅助设备可以访问通知。

 function onFormSubmit(event)
 {
      $.post('http://url.to.your.service', 
             $('#theFormId').serialize(), 
             function(data, textStatus)
             {
                   switch(textStatus)
                   {
                        // Alert or some other 
                        // accessible notification of success/failure
                   }
             }
      );
 }

EDIT: I really need to read questions more carefully sometimes. So you are already using the submit button to send an AJAX request. Maybe my usability comments will be useful to you so I'll leave that part of the answer up. If you set the action to javascript:null(0), #, or set the target to a hidden iframe, that should work as well.

编辑:我有时需要更仔细地阅读问题。因此,您已经使用提交按钮发送AJAX请求。也许我的可用性评论对你有用,所以我会留下那部分答案。如果将操作设置为javascript:null(0),#,或将目标设置为隐藏的iframe,那么该操作也可以正常工作。

#1


1  

Instead of setting an action on the form $.bind() a click handler to the forms submit button and use $.post() to make the post request. A few words of caution though. First, you should probably set the action on the form and let it redirect by default for people that have Javascript disabled, then use jQuery to remove the action from the form and to $.bind() the click handler to the submit button when the page loads. Second, in my code when I say to use alert or some other accessible notification, I mean use the alert() method or if you use a dom element to contain the notification, make sure you use WAI-ARIA live region and roles attributes to make the notification accessible to assistive devices.

而不是在表单$ .bind()上设置一个操作,而是单击处理程序到表单提交按钮并使用$ .post()来发出请求。但要谨慎一些。首先,你应该在表单上设置动作,默认情况下让它为已禁用Javascript的人重定向,然后使用jQuery从表单中删除动作,并使用$ .bind()单击处理程序到提交按钮页面加载。其次,在我的代码中,当我说使用alert或其他一些可访问的通知时,我的意思是使用alert()方法,或者如果你使用dom元素来包含通知,请确保使用WAI-ARIA实时区域和角色属性使辅助设备可以访问通知。

 function onFormSubmit(event)
 {
      $.post('http://url.to.your.service', 
             $('#theFormId').serialize(), 
             function(data, textStatus)
             {
                   switch(textStatus)
                   {
                        // Alert or some other 
                        // accessible notification of success/failure
                   }
             }
      );
 }

EDIT: I really need to read questions more carefully sometimes. So you are already using the submit button to send an AJAX request. Maybe my usability comments will be useful to you so I'll leave that part of the answer up. If you set the action to javascript:null(0), #, or set the target to a hidden iframe, that should work as well.

编辑:我有时需要更仔细地阅读问题。因此,您已经使用提交按钮发送AJAX请求。也许我的可用性评论对你有用,所以我会留下那部分答案。如果将操作设置为javascript:null(0),#,或将目标设置为隐藏的iframe,那么该操作也可以正常工作。