1

I have a form that has several fields all within the class Contact that have a common header.

I need that header to turn red whenever the user hits submit with any contact field unfilled. These fields (first_name, last_name, company, Marketing_Phone, email) already have the class error added when submitted empty.

These fields are all in the class wrap_contact with the label Contact Information *. This label does not receive the class error on submit. This is what I need to add. I gave the label an id of label2. So my if then is if first_name, last_name, company, Marketing_phone, or email is null on submit then label2 has the error class added.

I attempted adding the following code, but it did not work. 

 $( "#pardot-form" ).submit(function( event ) {
    var someElements = document.querySelector("p.error,input[name=263882_11763pi_263882_11763]}");

    if (someElements !== "") {
       document.getElementById('p.label2').addClass = 'error';
    }

 };

This form is visible online at http://link.rubiconglobal.com/l/263882/2017-03-24/7ssj.

Neithan Max
  • 11,004
  • 5
  • 40
  • 58
Kate Toohey Brough
  • 11
  • 1
  • 3

2 Answers2

0

The problem is that your submit still occurs and the page is reloaded. You will need to add event.preventDefault() and event.stopPropagation() to prevent submit action from occurring and reloading the page. Alternatively, since you are using jQuery, you can simply return false which does both. See: https://stackoverflow.com/a/1357151/1736092

Community
  • 1
  • 1
spex
  • 1,110
  • 10
  • 21
  • If we do a stopPropogation, how does it allow for the final action once all required fields are full? – Kate Toohey Brough Apr 02 '17 at 19:25
  • Perhaps I need to clarify. The form submits, and when it does, the error class is automatically added to any fields that don't validate. SO. I need the if statement to be if any contact field has the class error on it, then the label2 class needs to have error added to it. – Kate Toohey Brough Apr 03 '17 at 02:44
  • You're already doing that, but it's getting undone by the submission. Once there are no errors, your if-statement won't return true and the submission will occur. – spex Apr 04 '17 at 11:48
0

If x element has a class then add class to y element:

     <script>
     if( $('.first_name, .last_name, .company, .zip, .Marketing_Phone, .email').hasClass('error') === true ) 
    {
    $('p#label2').addClass('label2error');
    }
    </script>
Katy H.
  • 224
  • 1
  • 10