Experts Exchange connects you with the people and services you need so you can get back to work.

Javascript & jQuery validation

I have a form that needs to do 2 things when the submit button is clicked:
1. validate (jQuery code working correctly)
2. show a popup window "Please wait" message (also working)

But since I added the onclick to the button, it no longer validates. I'm sure it's order of operations. Can someone please show the right way to accomplish both?

Code for item #1:

    <script type='text/javascript'>
    $(document).ready(function(){
		$("#cc-form").validate({
			rules: {
			  cbAgree: "required",
              cardtype: "required",
              ccnum: {
                required: true,
                creditcard: true
                },
              ccexp: {
                required: true,
				minlength:4 ,
                digits: true
			    },
              cvv: {
                required: true,
				minlength:3,
                digits: true
                }
              },
			messages: {
				cbAgree: "Terms and Conditions must be read before submitting your donation.",
				cardtype: "You must select a credit card type.",
				cvv: {
					required: "Please enter the CVV code.",
					minlength: "CVV must include three numbers.",
					digits: "You must enter numbers."
				},
				ccexp: {
					required: "Please enter the CVV code.",
					minlength: "Credit card expiration must include four numbers.",
					digits: "You must enter numbers."
				}
			}
          });
        });
    </script>

Open in new window

Code for item #2:

	<script type="text/javascript">
		function showWait() {
			centerPopup();
			loadPopup();
			document.forms['cc-form'].submit();
		}
	</script>

Open in new window

And the button code:

<input class='pill-button' type='submit' name="DB" value='Start' onclick="showWait()"/>

Open in new window

kkbenj

Asked: 2012-03-15

Advertise Here

JavaScript

1 Solution

LVL 22

MrunalCommented: 2012-03-15

try by adding:

return true;

from function like:

function showWait()
{
      centerPopup();
      loadPopup();
      document.forms['cc-form'].submit();
return true;
}

and modify calling like:

<input class='pill-button' type='submit' name="DB" value='Start' onclick="return showWait()"/>

kkbenjAuthor Commented: 2012-03-15

I tried the changes but still didn't validate.

kkbenjAuthor Commented: 2012-03-15

Is there a way to launch the popup routine after validation? In other words, get rid of the onclick and incorporating the popup into the validation routine.

LVL 22

MrunalCommented: 2012-03-15

Ok.
Then why not you validate you form on Start button click instead of calling in document.ready function?

Provided your form is submitted only by this button click manually and you have to validate all for controls before submit.

I mean on click of Start button call function, say "showWait()" then in this function, you have to do two things,
1. Display progress bar
2. Validate form controls and return true only if all validation succeeded and return false if any on is failed.

Hope you get it what I mean.

kkbenjAuthor Commented: 2012-03-15

I get the concept but could you provide code please?

LVL 22

MrunalCommented: 2012-03-15

Here is your code:

<script type="text/javascript">
		
function showWait() {

	//First display progress bar
	DisplayProgressBar();

	//Validate form controls
	ValidateForm();
}

function DisplayProgressBar(){
	centerPopup();
	loadPopup();
	document.forms['cc-form'].submit();
}

function ValidateForm(){
	$("#cc-form").validate({
		rules: {
			cbAgree: "required",
		 	cardtype: "required",
              		ccnum: {
                			required: true,
                			creditcard: true
               		},
              		ccexp: {
                			required: true,
				minlength:4 ,
                			digits: true
			},
              		cvv: {
                			required: true,
				minlength:3,
                			digits: true
                		}
		},
		messages: {
			cbAgree: "Terms and Conditions must be read before submitting your donation.",
			cardtype: "You must select a credit card type.",
			cvv: {
				required: "Please enter the CVV code.",
				minlength: "CVV must include three numbers.",
				digits: "You must enter numbers."
			},
			ccexp: {
				required: "Please enter the CVV code.",
				minlength: "Credit card expiration must include four numbers.",
				digits: "You must enter numbers."
			}
		}
          	});
}

</script>

Open in new window

kkbenjAuthor Commented: 2012-03-17

Thank you for the code. It does the verification but does not halt if there are errors. The errors display properly but submits anyway. It there a way for verification to return a true/false?

kkbenjAuthor Commented: 2012-03-17

I modified to check for true / false:

function showWait() {

      //First display progress bar
      DisplayProgressBar();

      //Validate form controls
      keepGoing = ValidateForm();

      if (keepGoing) {
            document.forms['cc-form'].submit();
      } else {
            disablePopup();
      }

}

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Javascript & jQuery validation

Join & Write a Comment Already a member? Login.

Featured Post