$ajax() to validation. what is it?

Hello
Want the code below to add the next code.


$(document).ready(function(){
	
	$('#submit').click(function() {
		
		$('#waiting').show(500);
		$('#demoForm').hide(0);
		$('#message').hide(0);
		
		$.ajax({
			type : 'POST',
			url : 'post.php',
			dataType : 'json',
			data: {
				email : $('#email').val(),
				url	  : $('#url').val(),
				name  : $('#name').val()
			},
			success : function(data){
				$('#waiting').hide(500);
				$('#message').removeClass().addClass((data.error === true) ? 'error' : 'success')
					.text(data.msg).show(500);
				if (data.error === true)
					$('#demoForm').show(500);
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				$('#waiting').hide(500);
				$('#message').removeClass().addClass('error')
					.text('There was an error.').show(500);
				$('#demoForm').show(500);
			}
		});
		
		return false;
	});
});

to this code:(this code is same http://bassistance.de/jquery-plugins/jquery-plugin-validation/)


<script type="text/javascript">
$(document).ready(function() {
	// validate signup form on keyup and submit
	var validator = $("#signupform").validate({
		rules: {
			firstname: "required",
			lastname: "required",
			username: "required",
			password: {
				required: true,
				minlength: 5
			},
			password_confirm: {
				required: true,
				minlength: 5,
				equalTo: "#password"
			},
			email: {
				required: true,
				email: true,
			},
			dateformat: "required",
			terms: "required"
		},
		messages: {
			firstname: "Enter your firstname",
			lastname: "Enter your lastname",
			username: {
				required: "Enter a username",
				minlength: jQuery.format("Enter at least {0} characters"),
				remote: jQuery.format("{0} is already in use")
			},
			password: {
				required: "Provide a password",
				rangelength: jQuery.format("Enter at least {0} characters")
			},
			password_confirm: {
				required: "Repeat your password",
				minlength: jQuery.format("Enter at least {0} characters"),
				equalTo: "Enter the same password as above"
			},
			email: {
				required: "Please enter a valid email address",
				minlength: "Please enter a valid email address",
				remote: jQuery.format("{0} is already in use")
			},
			dateformat: "Choose your preferred dateformat",
			terms: " "
		},
		// the errorPlacement has to take the table layout into account
		errorPlacement: function(error, element) {
			if ( element.is(":radio") )
				error.appendTo( element.parent().next().next() );
			else if ( element.is(":checkbox") )
				error.appendTo ( element.next() );
			else
				error.appendTo( element.parent().next() );
		},
		// specifying a submitHandler prevents the default submit, good for the demo
		submitHandler: function() {
			$('#waiting').hide(500);
				$('#message').removeClass().addClass((data.error === true) ? 'error' : 'success')
					.text(data.msg).show(500);
				if (data.error === true)
					$('#demoForm').show(500);
		},
		// set this class to error-labels to indicate valid fields
		success: function(label) {
			// set &nbsp; as text for IE
			label.html("&nbsp;").addClass("checked");
		}
	});
	
	// propose username by combining first- and lastname
	$("#username").focus(function() {
		var firstname = $("#firstname").val();
		var lastname = $("#lastname").val();
		if(firstname && lastname && !this.value) {
			this.value = firstname + "." + lastname;
		}
	});

});
</script>

What is this?

jQuery validation is an event listener basically, the rules key in the [object Object] method set the parameters for how the field should be handled and then the plug-in sets all events that apply to the field. For example in the code above if i pressed submit which has its own event handler binded to it by the validation and didn’t enter a first name the script would automatically check all the rules and send back a false return.

The messages method handles all the errors you would see so by default the message gets appended after the input field but with some fiddling you can create custom error messages using tooltips and such.

Still confused?
http://docs.jquery.com/Plugins/validation

Thank you, My dear Friend

how is live validator?

?

It is doing very well.

i have problem to add $ajax() to validation?
How do I fix it?
Why this code does not work $.ajax()?

  <script>
  $(document).ready(function(){
    $(".myform").validate({
  rules: {
    email: {
      required: true,
      email: true
    },
    url: {
      required: true,
      url: true
    },
    name: {
      required: true,
    },
  }
});
$(".button").click(function() {
		// validate and process form
		// first hide any error messages
	
	  var email = $("input#email").val();
	  var url = $("input#url").val();
	  var name = $("input#name").val();
	  var dataString = 'email='+ email + '&url=' + url + '&name=' + name;
		//alert (dataString);return false;
		
		$.ajax({
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<h2>Contact Form Submitted!</h2>")
        .append("<p>We will be in touch soon.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
     });
    return false;
	});
  });
  </script>

The ajax response is being received from process.php

You need to investigate the process.php code, what it does with the posted data, and how it responds.

process.php no problem, problem is of top code. help me.
thanks

I will try using my own test page and your code.

If you provide a link to your own test page online, you will get much more accurate responses.

There are two different ways for the validation to occur.

Either, automatically from a submit button.
Or, explicitly where you trigger the validation yourself.

If you are not using what web browsers recognise as a submit button, you will need to explicitly trigger the validation yourself.

The valid() function is what you use to explicitly trigger the validation.

my test page link: http://binboy.gigfa.com/

Because the validate code takes over the processing of the form, you need to move your button click function to be within the validate part instead.

The validate part has a rules section, so now you just need to add a section called submitHandler, which will be run once the submitted form validates.

From the validation documentation page:

Use submitHandler to implement your own form submit, eg. via Ajax. Use invalidHandler to react when an invalid form is submitted.


$(".myform").validate({ 
  rules: { 
    ...
  },
  submitHandler: function () {
    ...
  }
});

You can see a live working example at: http://jquery.bassistance.de/validate/demo/milk/

You don’t need to embed the function in there either. Your function can easily be separate, and referenced from the validate code.


function formSubmitHandler() {
    ...
}

$(".myform").validate({ 
  rules: { 
    ...
  },
  submitHandler: formSubmitHandler
});

Thanks
There is this case to my code. there is success: function to $ajax() but not work validate and send data page without refresh ($ajax()).!?

Sorry, it’s not a success function, it’s the submitHandler function. Have another look at my previous post which also provides documentation info from the validate page concerning using ajax on success.

I wrote the following code but not work.
I wrote it wrong?

  <script>
  $(document).ready(function(){
  function formSubmitHandler() {
$(".button").click(function() {
		// validate and process form
		// first hide any error messages
	
	  var email = $("input#email").val();
	  var url = $("input#url").val();
	  var name = $("input#name").val();
	  var dataString = 'email='+ email + '&url=' + url + '&name=' + name;
		//alert (dataString);return false;
		
		$.ajax({
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<h2>Contact Form Submitted!</h2>")
        .append("<p>We will be in touch soon.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
     });
    return false;
	});
}
    $(".myform").validate({
  rules: {
    email: {
      required: true,
      email: true
    },
    url: {
      required: true,
      url: true
    },
    name: {
      required: true,
    },
  },
  submitHandler: formSubmitHandler
});

  });
  </script>

The submitHandler event of the validator replaces the submit button click event.

You must remove the button click part of the code.

I sorry
this way:

  <script>
  $(document).ready(function(){
  function formSubmitHandler() {
		// validate and process form
		// first hide any error messages
	
	  var email = $("input#email").val();
	  var url = $("input#url").val();
	  var name = $("input#name").val();
	  var dataString = 'email='+ email + '&url=' + url + '&name=' + name;
		//alert (dataString);return false;
		
		$.ajax({
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<h2>Contact Form Submitted!</h2>")
        .append("<p>We will be in touch soon.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
     });
    return false;
}
    $(".myform").validate({
  rules: {
    email: {
      required: true,
      email: true
    },
    url: {
      required: true,
      url: true
    },
    name: {
      required: true,
    },
  },
  submitHandler: formSubmitHandler
});

  });
  </script>
 <input type="submit" value="Validate!" class="submitHandler" />

Is it true?

Yes that looks right now but you don’t need to add the class submitHandler to your submit button unless your styling it.

How is used submitHandler?
did this is not right!?

 <input type="submit" value="Validate!" class="submitHandler" /> 

He’s saying that the class attribute on the input has no relation with the validator itself.

It works just the same with:


<input type="submit" value="Validate!" />