Jquery Form Validation On Submit Issues

Hi Experts,

Quick Question,

I found part of this code for validating the elements of a form aren't empty and if they are complete move on to submit (my ajax call).

However when i test the script.... if i leave part of the form blank it give me the alert and won't submit, however if all the fields are fulfilled it submits..but to page... rather than hitting the Ajax function which i want it to do.

i've tried a ton of different variations and i just need someone else's eyes to spot my mistakes.

Many thanks

Ross

<script>
$("#submitbutton").click(function(){ 
	

    var result = true;
	
    $('.Insert input[type=text]').each(function(n,element){
        if ($(element).val()=='') {
             alert('The ' + element.name + ' must have a value');
             return result = false;
        }
    });
    return result;
	 
	var dataString =  $('.Insert').serialize() + '&membernumber=' + 14740 ; 
	
	
	$.ajax({
			type: "POST",
			url: "insert.php",
			data: dataString,
			success: function(result){
				    
 $(".formbox").slideUp();
 $(".results").fadeOut( "slow" );
  document.getElementById("registered").style.visibility = "visible";
		setTimeout(function() {
		  window.location.href = "http://www.google.co.uk/";
		}, 2000);
			
                 
					
                   
                }
			});
			return false;
	
	
	
	
	});
</script>

Open in new window

LVL 7
Ross TurnerManagement Information Support AnalystAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Hans LangerCommented:
I dont think that you need to use a type="submit" button to submit data to the server, try changing to type="button" instead. If you need to do it like that because of your code then I would use the following steps:

1) add a <form id="myform" onsubmit="myOnSubmitFunction();return false">

2) add at the end of the onclick function a submit of myform, something like:
$("#submitbutton").click(function(){ 
    //validateForm fields of the form
    if(formIsValid)
        $('#myform').submit()
}

Open in new window


3) create the function that will be executed on submit the form:
function myOnSubmitFunction(){
 //do your ajax call
}

Open in new window

Julian HansenCommented:
Your code will never hit the AJAX because you have a return statement right before it.
<script>
$("#submitbutton").click(function(){ 
  var result = true;

  $('.Insert input[type=text]').each(function(n,element){
    if ($(element).val()=='') {
      alert('The ' + element.name + ' must have a value');
      return result = false;
    }
  });
  // THIS IS WHY
  return result;

  var dataString =  $('.Insert').serialize() + '&membernumber=' + 14740 ; 

  $.ajax({

Open in new window

Julian HansenCommented:
A slightly different way of doing it (I prefer the event approach on the form rather than onclick handler or button event)

$('form').submit(function() {
  var result = true;
  
  $('.Insert input[type=text]').each(function(n,element){
    if ($(element).val()=='') {
      alert('The ' + element.name + ' must have a value');
      result = false;
    }
  });
  if (result) {
    var dataString =  $('.Insert').serialize() + '&membernumber=' + 14740 ; 

    $.ajax({
      type: "POST",
      url: "insert.php",
      data: dataString,
      success: function(result){

        $(".formbox").slideUp();
        $(".results").fadeOut( "slow" );
        document.getElementById("registered").style.visibility = "visible";
        setTimeout(function() {
          window.location.href = "http://www.google.co.uk/";
        }, 2000);
      }
    });
  }
  
  return false;
});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ross TurnerManagement Information Support AnalystAuthor Commented:
Thank you julianH your suggestion it worked t treat also i want thank GERENTE !!!

Awesome work fellas!
Julian HansenCommented:
You are welcome - thanks for the points.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.