Solved

Javascript & jQuery validation

Posted on 2012-03-15

JavaScript

1 solution

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

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

Join The Community

8 Comments

LVL 22

Expert Comment

by:Mrunal

ID: 377241562012-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()"/>

Author Comment

by:kkbenj

ID: 377241862012-03-15

I tried the changes but still didn't validate.

Author Comment

by:kkbenj

ID: 377241922012-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

Expert Comment

by:Mrunal

ID: 377241972012-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.

Author Comment

by:kkbenj

ID: 377242242012-03-15

I get the concept but could you provide code please?

LVL 22

Accepted Solution

by:Mrunal

Mrunal earned 500 total points

ID: 377242992012-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

Author Comment

by:kkbenj

ID: 377324382012-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?

Author Closing Comment

by:kkbenj

ID: 377324452012-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();
      }

}

Featured Post

Question has a verified solution.

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

Sorting Arrays and Collections in JavaScript

Article by: DanRollins

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 …

JavaScript

Javascript number formating

Article by: Ivo

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…

JavaScript

Introduction to jQuery (Part 1)

Video by: Jason

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)

Introduction to jQuery (Part 2)

Video by: Jason

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…