Avatar of kkbenj
kkbenj
 asked on

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

JavaScript

Avatar of undefined
Last Comment
kkbenj

8/22/2022 - Mon
Mrunal

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()"/>
kkbenj

ASKER
I tried the changes but still didn't validate.
kkbenj

ASKER
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.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Mrunal

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.
kkbenj

ASKER
I get the concept but could you provide code please?
ASKER CERTIFIED SOLUTION
Mrunal

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
kkbenj

ASKER
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?
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
kkbenj

ASKER
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();
      }
      
}