I have the following problem:

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

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

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

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

```

And if needed, here is the HTML to it.

```
<form id="main-form" method="post">
        <fieldset>
            <legend>COMPLEX</legend>

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

            <input type="checkbox" id="pwShow">
            <label class="pwShow" for="pwShow">Show Password</label>
            <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 [ \ | / + . ].">password help</div>
            <span class="help-text-password1">Your password must have at least 8 digits, 1 capital letter and 1 number or 1 special symbol like [ \ | / + . ].</span>

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

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

            <button class="form-btn" type="submit">Submit</button>
        </fieldset>
    </form>

```

Thanks in advance!