JQuery validate() method plugin with JS submit

Question

I have the following code:

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

which corresponds to:

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

I call validate and my form, skips validation and goes straight to the post method. I know that validate() is working because I use an event to call validations in line.

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


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

  });
   }

Am I doing something wrong? How can I fix this?

Post the HTML of the form, you are relying on form classes to specify validation rules, so we need to see those. See the demo code here. docs.jquery.com/Plugins/Validation — BNL
– BNL, Commented Oct 4, 2011 at 19:27

name · Accepted Answer · 2011-10-05 16:53:41Z

1

That's because you've attached the ajax post to onClick. It fires the ajax regardless of the validation script. Use something like

$('#yourlink').click(function(e){
 if (aVariableThatIndicatesPresenceOfErrors) {
  e.preventDefault()
 } else {
  submit_form(posturl)
 }

})

Of course, that variable will have to be made somehow. Perhaps a selector with the error message class?

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

Not sure if the validate plugin has a callback method though, which could negate all this.

edited Oct 5, 2011 at 16:53

answered Oct 4, 2011 at 20:02

name

4574 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BNL · Accepted Answer · 2011-10-04 19:32:16Z

0

You would need to actually use the form's submit event to automatically validate. Your code simply posts to the server via ajax w/o ever validating anything.

answered Oct 4, 2011 at 19:32

BNL

7,1214 gold badges30 silver badges32 bronze badges

Comments

JAS · Accepted Answer · 2011-10-04 21:28:56Z

0

You can use the following code:

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

Replace "targetFormId" with your form id

answered Oct 4, 2011 at 21:28

JAS

2942 silver badges7 bronze badges

Collectives™ on Stack Overflow

JQuery validate() method plugin with JS submit

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related