Calling validation through ajax function

Question

I have two pieces of javascript that I would like to work together. I have a form that is submitted via ajax, and a form validation script, that I would like to work together to prevent the ajax form submission if the validation fails.

Here is the ajax form submission script:

<script type="text/javascript">
$(document).ready(function(){$(".sendName").click(function(){
var jsuser=$("#jsuser").val();
var jemail=$("#jemail").val();
var jusid=$("#jusid").val();
$.post("recomend.php",{jsuser:jsuser,jusid:jusid,jemail:jemail},function(data){$("#loadName")
.html(data)
.effect('bounce', { times: 5, distance: 30 }, 300);
  });
 });
});
$('#start').click(function() {
  $('#effect').toggle('fast', function() {
   });
});
</script>

This code works perfectly, and the form is submitted.

I also have the validation code partially working. If incorrect information is entered the error message is shown beside the field, but the form can still be submitted.

On a normal form the validation code is called like this:

<form method="post" action="formprocess.php" name="form1" id="form1" onsubmit="return validate(this)">

So, I need to know how to do the equivalent of:

onsubmit="return validate(this)"

in the ajax submission code, and not submit the form if there are errors.

Out of curiosity, why do you not award upvotes to helpful answers provided by people assisting you with your problem? — Phrogz
– Phrogz, Commented May 19, 2012 at 5:13
I usually do. I also always accept the answer that best helps with my problem. When I was trying to sort this out earlier I was in a bit of a rush so just marked the accepted answer and left. However, I always check my questions for new posts and comments, and to accept an answer and mark up the answers that were even slightly helpful. Both answers on this question helped me figure out a few things, so they have both been voted up. — Sherwin Flight
– Sherwin Flight, Commented May 19, 2012 at 7:15

stevebot · Accepted Answer · 2012-05-18 22:51:38Z

1

Why don't you just do the following?

<script type="text/javascript">

$(document).ready(function(){$(".sendName").click(function(){

var jsuser=$("#jsuser").val();
var jemail=$("#jemail").val();
var jusid=$("#jusid").val();
if(validate(jsuser, jemail, jusid)){
$.post("recomend.php",{jsuser:jsuser,jusid:jusid,jemail:jemail},function(data){$("#loadName")
.html(data)
.effect('bounce', { times: 5, distance: 30 }, 300);
  });
 });
});
$('#start').click(function() {
  $('#effect').toggle('fast', function() {
   });
});
}
</script>

Where validate does your validation

answered May 18, 2012 at 22:51

stevebot

24.2k35 gold badges133 silver badges187 bronze badges

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

1 Comment

Sherwin Flight Over a year ago

I ended up doing something very similar to this.

Phrogz · Accepted Answer · 2012-05-18 22:58:55Z

1

$(".sendName").click(function(){
  if (!validate(this.form)) return;
  // rest of your function, including AJAX call
});

The .form property is available on all form elements (HTMLSelectElement, HTMLOptionElement, HTMLInputElement, HTMLTextAreaElement, HTMLButtonElement, HTMLLabelElement, HTMLFieldSetElement, HTMLLegendElement, HTMLObjectElement, and HTMLIsIndexElement).

edited May 18, 2012 at 22:58

answered May 18, 2012 at 22:50

Phrogz

304k115 gold badges669 silver badges758 bronze badges

5 Comments

Phrogz Over a year ago

By writing JavaScript, e.g. if (…){ … }else{ … }

Sherwin Flight Over a year ago

I'm familiar with if statements. Just not 100% sure about the "return" in your code. Would I do if (!validate(this.form)){ return;} else { } according to your posted code?

Sherwin Flight Over a year ago

In your code, what is the "this" referencing? Is it referencing a form with the class ".sendName"? That is actually the class of the submit button that is used to send the form via ajax. If I was going to hard-code in a reference to the form what would I use in place of "this.form" in your code?

Phrogz Over a year ago

this is the element upon which the click handler was registered. As I noted in the question, elements of a form (like the submit button) have a .form property that references the form itself. Based on your original validation code, I was assuming that your validate() method takes as its argument the form that will be validated.

Sherwin Flight Over a year ago

Thanks for the info on the .form property :)

Collectives™ on Stack Overflow

Calling validation through ajax function

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related