Solved

Javascript & jQuery validation

Posted on 2012-03-15
8
419 Views
Last Modified: 2012-03-17
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
Comment
Question by:kkbenj
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
8 Comments
 
LVL 22

Expert Comment

by:Mrunal
ID: 37724156
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
 

Author Comment

by:kkbenj
ID: 37724186
I tried the changes but still didn't validate.
0
 

Author Comment

by:kkbenj
ID: 37724192
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!

 
LVL 22

Expert Comment

by:Mrunal
ID: 37724197
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
 

Author Comment

by:kkbenj
ID: 37724224
I get the concept but could you provide code please?
0
 
LVL 22

Accepted Solution

by:
Mrunal earned 500 total points
ID: 37724299
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
 

Author Comment

by:kkbenj
ID: 37732438
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
 

Author Closing Comment

by:kkbenj
ID: 37732445
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

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

630 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question