Question

我有以下代码：

<a href="#" onclick="submit_form('http://allstateagents.contextoptional.com//create_lead'); return false;"><img alt="Btn_requestaquote" src="http://a0.allstateagents.contextoptional.com/images/btn_requestAquote.png?1317752211"></a>

对应于：

function submit_form(posturl) {
    $.ajax({
      url: '/create_lead',
      data: {
        'lead_gen[promotion_id]': $('#lead_gen_promotion_id').val(),
        'lead_gen[name]': $('#lead_gen_name').val(),
        'lead_gen[email]': $('#lead_gen_email').val(),
      },
      type: 'POST',
      dataType: 'json',
      success: function(data) {
        console.log(data)
         $('#content').html(data.html);
      }
    });

我调用validate和我的表单，跳过验证并直接进入post方法。我知道validate（）正在运行，因为我使用一个事件来调用验证。

$(document).ready(function(){
    $("#lead_gen_email").validate();
    console.log("testing validate")


    $("#lead_gen_email").validate({
       onkeyup: true
    })

  });
   }

我做错了吗？我该如何解决这个问题？

Answer 1

那是因为你已将ajax帖子附加到onClick上。无论验证脚本，它都会触发ajax 。使用像

这样的东西
$('#yourlink').click(function(e){ if (aVariableThatIndicatesPresenceOfErrors) { e.preventDefault() } else { submit_form(posturl) } })

当然，必须以某种方式制作该变量。也许是一个带错误消息类的选择器？

var hasError = $('div.error').length;

不确定验证插件是否有回调方法，这可能会否定所有这些。

Answer 2

您需要实际使用表单的提交事件来自动验证。您的代码只需通过ajax发送到服务器，无需验证任何内容。

Answer 3

您可以使用以下代码：

function submit_form(posturl) {
if ($("#targetFormId").valid()) {
$.ajax({
  url: '/create_lead',
  data: {
    'lead_gen[promotion_id]': $('#lead_gen_promotion_id').val(),
    'lead_gen[name]': $('#lead_gen_name').val(),
    'lead_gen[email]': $('#lead_gen_email').val(),
  },
  type: 'POST',
  dataType: 'json',
  success: function(data) {
    console.log(data)
     $('#content').html(data.html);
  }
}
});

将“targetFormId”替换为您的表单ID

使用JS提交的JQuery validate（）方法插件

3 个答案: