asked on

Jquery validation questions.

Hi,

I am trying to implement jquery validation on my simple form but have a few questions.

1. How do I get it to carryout submitting the form after validation is true?

My current code is this and it works perfectly:

$('#submitButton').click(function(e) {
	

			
		e.preventDefault();
		$.ajax({
            type: "POST",
            url: "pages/add/AddPageUpdate.asp",
            data:  $(this.form).serialize(),
            cache: false,
            dataType: "html"
		})
		.done(function(responseText) {
				 $('#dialog').popup('show');
		})
		.fail(function() {
                alert("Error");
        });
		return false;
		
		 
		
	});

Open in new window

I just want to be able to run my ajax code if the form validates correctly.

2. How can I improve the validation text so it looks better than just white text? Are there any predefined symbols?

Coast Line

Try using the jquery validate plugin it's free and much more advanced and better as to what you are trying to do manually

SmashAndGrab

ASKER

Hi Yes - I have been trying to use the jquery validate but everytime I add the jquery it stops my the ajax part of my jquery from working.

SmashAndGrab

ASKER

I would like it to work.

like this..

Users clicks the submit.
Form validates
if successful run ajax code to submit the form

SmashAndGrab

ASKER

This is the ajax part when the user clicks submit.

I just don't know how to put the validate code in this successfully.

$('#submitButton').click(function(e) {



            e.preventDefault();
            $.ajax({
type: "POST",
url: "pages/add/AddPageUpdate.asp",
data: $(this.form).serialize(),
cache: false,
dataType: "html"
            })
            .done(function(responseText) {
                         $('#dialog').popup('show');
            })
            .fail(function() {
alert("Error");
});
            return false;



      });

ASKER CERTIFIED SOLUTION

Coast Line

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SmashAndGrab

ASKER

thanks.

Here is my attempt:

Existing (working) code (has no validation yet):

 $('#submitButton').click(function(e) {
       

                   
             e.preventDefault();
             $.ajax({
             type: "POST",
             url: "pages/add/AddPageUpdate.asp",
             data:  $(this.form).serialize(),
             cache: false,
             dataType: "html"
             })
             .done(function(responseText) {
                          $('#dialog').popup('show');
             })
             .fail(function() {
                 alert("Error");
         });
             return false;
             
              
             
       });

Open in new window

Attempt with validation:

$('#submitButton').click(function(e) {
       
$("#myform").validate({
  submitHandler: function(form) {
    //form.submit();

// add my code to submit form..

 e.preventDefault();
             $.ajax({
             type: "POST",
             url: "pages/add/AddPageUpdate.asp",
             data:  $(this.form).serialize(),
             cache: false,
             dataType: "html"
             })
             .done(function(responseText) {
                          $('#dialog').popup('show');
             })
             .fail(function() {
                 alert("Error");
         });
             return false;
             
              
             
       }); 




  }
 });

Open in new window

My attempt does the validation but the form never gets submitted.

Coast Line

Why the data type as HTML

SmashAndGrab

ASKER

I'm not sure, I found the code online.

The ajax part works fine on its own but when I add the validation code it doesn't work - I am assuming the issue is when I add the validation code