• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 444
  • Last Modified:

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

0
kkbenj
Asked:
kkbenj
  • 5
  • 3
1 Solution
 
MrunalCommented:
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()"/>
0
 
kkbenjAuthor Commented:
I tried the changes but still didn't validate.
0
 
kkbenjAuthor Commented:
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.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
MrunalCommented:
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.
0
 
kkbenjAuthor Commented:
I get the concept but could you provide code please?
0
 
MrunalCommented:
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

0
 
kkbenjAuthor Commented:
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?
0
 
kkbenjAuthor Commented:
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();
      }
      
}
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now