Avatar of egoselfaxis
egoselfaxis

asked on 

Need help adding minor additional functionality to JQuery Form Validation script

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>

Open in new window


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");          
}

Open in new window


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
JavaScriptjQuery

Avatar of undefined
Last Comment
egoselfaxis
Avatar of Leonidas Dosas
Leonidas Dosas
Flag of Greece image

Remove line 322 and retry
Avatar of egoselfaxis
egoselfaxis

ASKER

I tried commenting out line # 322 as you suggested and the behavior remains the same.

https://www.evergladesholidaypark.com/ehp-landingpage-markup/
ASKER CERTIFIED SOLUTION
Avatar of Leonidas Dosas
Leonidas Dosas
Flag of Greece image

Blurred text
THIS SOLUTION IS 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
Avatar of egoselfaxis
egoselfaxis

ASKER

This code replacement doesn't display my .error-class DIV at all.

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

I appreciate your help by the way,
Avatar of egoselfaxis
egoselfaxis

ASKER

Leonidas .. I just discovered that there's some additional form field validation going on inside this other JS file:

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

I'm examining and revising this other script it as we speak.  

My apologies .. I wasn't aware of this until just now.  I'll post a followup once I've made some progress.

- Yvan
Avatar of egoselfaxis
egoselfaxis

ASKER

Thanks Leonidas.  Obviously I'm going to need to consolidate my 2 different JS files somehow.  

- Yvan
JavaScript
JavaScript

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.

127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo