Solved

Javascript & jQuery validation

Posted on 2012-03-15
8
377 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
  • 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
 
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

757 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now