troubleshooting Question

Need help adding minor additional functionality to JQuery Form Validation script

Avatar of egoselfaxis
egoselfaxis asked on
JavaScriptjQuery
6 Comments1 Solution105 ViewsLast Modified:
I have a web form on this page that's using jQuery based form field validation:

https://www.evergladesholidaypark.com/ehp-landingpage-markup/

Here's a link to the JS file that contains the validation script(s):

https://www.evergladesholidaypark.com/ehp-landingpage-markup/js/jquery.main.js

On the form .. I have the following DIV which is currently hidden by default:

<div class="error-message">            
You have either left one or more of the required fields in the form blank, or filled them out incorrectly.  Please apply the necessary corrections before re-submitting then form.            
</div>

Right now .. if you just click on the submit button without filling in any of the fields, .. the .error-message DIV is displayed for about 3 seconds, and then fades out.  I'm doing that using this code snippet which starts at about line number 305 in the JS file:

if (success != true) {          
  $(".error-message").show().delay(3000).fadeOut( "slow");          
}

The problem, however, is that I've placed this code inside the "checkSuccess" handler --- which is also being fired whenever an "onChange" event is triggered by any of the form fields.  This is obviously resulting in undesired effect .. where the error message repeatedly gets displayed adn then fades out, ... making the page grow and then shrink repeatedly.

What I'd like to do is change the script so that the .error-message DIV is only displayed when the following rules are met:

1) The submit button has been clicked.
2) One or more of the required fields in the form has failed the validation

In other words, .. I'd like to disassociate the showing of the .error-message DIV from the onChange events that are triggered by interacting with the form fields.

How would I do that?  And how can I also force the immediate hiding of that .error-message DIV when the submit button is clicked and all of the validation rules have been met (in addition to actually submitting the form)?

Thanks,
- Yvan
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 6 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros