Execute event when an input field has an error
<p>I have the following problem:</p>

<p>I'm trying to blend in some spans when the input in my form has an error (not matching the pattern, is empty or not matching another input).</p>

<p>I have tried some different codes, but none seems to work. Here is what I have at the moment.</p>

<p>And just so you guys know.. I'm quite the noob considering javascript or Jquery.</p>

<pre><code>var help_text_pw1 = $('.help-text-password1');
var help_text_pw1_toggle = $('#help-text-pw1');

help_text_pw1_toggle.on("click", function(e) {
    help_text_pw1.slideToggle();
});

var help_text_pw_confirm = $('.help-text-password-confirm');
var help_text_pw_confirm_toggle = $('#help-text-pw1-confirm');

help_text_pw_confirm_toggle.on("click", function(e) {
    help_text_pw_confirm.slideToggle();
});

var help_text_credit_card = $('.help-text-credit-card');
var help_text_credit_card_toggle = $('#help-text-credit-card');

help_text_credit_card_toggle.on("click", function(e) {
    help_text_credit_card.slideToggle();
});


var password = $('#password1');
var confirm_pw = $('#password-confirm1');
var submit = $('button[type="submit"]');
var credit_card_number = $('credit-card-number1');
var form = $('#main-form');

$(document).ready(function() {
  submit.click(function(event){

    data = password.val();
    var len = data.length;

    if (password.error()) {
        $(function() {
            help_text_pw1.slideDown();
        });
    }

    if (confirm_pw.error()) {
        $(function() {
            help_text_pw_confirm.slideDown();
        });
    }

    if (credit_card_number.error()) {
        $(function() {
            help_text_credit_card.slideDown();
        });  
    }  

    if (password.val() != confirm_pw.val()) {
        confirm_pw.css('border', '2px solid red');
        alert("Password and Confirm Password don't match");
        // Prevent form submission
        event.preventDefault();
    } 
  });
});
</code></pre>

<p>And if needed, here is the HTML to it.</p>

<pre><code>&lt;form id="main-form" method="post"&gt;
        &lt;fieldset&gt;
            &lt;legend&gt;COMPLEX&lt;/legend&gt;

            &lt;label for="password1"&gt;Password&lt;/label&gt;
            &lt;input type="password" placeholder="password" name="password" id="password1" required pattern="(((?=.*\d)|(?=.*\\\|\/\+\.))(?=.*[a-z])(?=.*[A-Z]).{8,})[A-Za-z0-9\\\/\|\+\.]"&gt;

            &lt;input type="checkbox" id="pwShow"&gt;
            &lt;label class="pwShow" for="pwShow"&gt;Show Password&lt;/label&gt;
            &lt;div class="help-text" id="help-text-pw1" title="Your password must have at least 8 digits, 1 capital letter and 1 number or 1 special symbol like [ \ | / + . ]."&gt;password help&lt;/div&gt;
            &lt;span class="help-text-password1"&gt;Your password must have at least 8 digits, 1 capital letter and 1 number or 1 special symbol like [ \ | / + . ].&lt;/span&gt;

            &lt;label for="password-confirm1"&gt;Confirmation&lt;/label&gt;
            &lt;input type="password" placeholder="confirm password" name="password-confirm" id="password-confirm1" required&gt;
            &lt;div class="help-text" id="help-text-pw1-confirm" title="This field must match the password entered above."&gt;confirm password help&lt;/div&gt;
            &lt;span class="help-text-password-confirm"&gt;This field must match the password entered above.&lt;/span&gt;

            &lt;label for="credit-card-number1"&gt;Credit Card&lt;/label&gt;
            &lt;input type="text" placeholder="4111 1111 1111 1111" name="credit-card-number" id="credit-card-number1" required pattern="[0-9]{13,16}"&gt;
            &lt;div class="help-text" id="help-text-credit-card" title="Enter a valid credit card number like: '4324 1265 2431 5456' or '1221 5356 4234 1'"&gt;card number help&lt;/div&gt;
            &lt;span class="help-text-credit-card"&gt;Enter a valid credit card number like: '4324 1265 2431 5456' or '1221 5356 4234 1'&lt;/span&gt;

            &lt;button class="form-btn" type="submit"&gt;Submit&lt;/button&gt;
        &lt;/fieldset&gt;
    &lt;/form&gt;
</code></pre>

<p>Thanks in advance!</p>