Javascript contact form validation code I'm a UI / UX Designer trying to sharpen my JS skills.  I wanted someone else to check this code snippet and maybe have a Pro tip to improve or shorten it.

Javascript:

var formContainer = $('.contact-form-container');
var formError = $('.form-error');
var tosLabel = $('.tos-label');
var tosCheckbox = $('.tos-checkbox');

function checkBoxValidation(tosLabel, tosCheckbox, formError) {
    if (!tosCheckbox.is(':checked')) {
        tosLabel.removeClass('tos-is-checked');
        formError.addClass('tos-error');
    } else if (tosCheckbox.is(':checked')) {
        tosLabel.addClass('tos-is-checked');
        formError.removeClass('tos-error');
    }
}

tosCheckbox.change(function() {
    checkBoxValidation(tosLabel, tosCheckbox, formError);
});

formContainer.submit(function () {
    checkBoxValidation(tosLabel, tosCheckbox, formError);
});


HTML:

    &lt;form data-abide novalidate method="post" action="{{ path(route) }}" class="contact-form-container"&gt;
        {% if contact.error %}
            &lt;div data-abide-error class="callout alert"&gt;
                &lt;p class="alert-text"&gt;&lt;i class="fi-alert size-24"&gt;&lt;/i&gt;{{ contact.error }}&lt;/p&gt;
            &lt;/div&gt;
        {% elseif contact.success %}
            &lt;div class="callout success"&gt;
                &lt;p class="success-text"&gt;&lt;i class="fi-check size-24"&gt;&lt;/i&gt;{{ contact.success }}&lt;/p&gt;
            &lt;/div&gt;
        {% endif %}
        &lt;div class="name-field"&gt;
            &lt;label&gt;Vor- und Nachname
                &lt;input type="text" required pattern="[a-zA-Z]+" name="name" value="{{ contact.name }}"&gt;
                &lt;small class="form-error"&gt;Vor- und Nachname angeben.&lt;/small&gt;
            &lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="email-field"&gt;
            &lt;label&gt;Ihre E-Mail Adresse
                &lt;input type="email" required name="email" value="{{ contact.email }}"&gt;
                &lt;small class="form-error"&gt;Ihre E-Mail Adresse ist nicht korrekt.&lt;/small&gt;
            &lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="message-field"&gt;
            &lt;label&gt;Ihre Nachricht
                &lt;textarea placeholder="Schreiben Sie eine Nachricht" name="message" required&gt;{{ contact.message }}&lt;/textarea&gt;
                &lt;small class="form-error"&gt;Ihre Nachricht angeben.&lt;/small&gt;
            &lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="tos-field"&gt;
            &lt;label for="checkbox1" class="tos-label"&gt;
                &lt;input id="checkbox1" class="tos-checkbox" type="checkbox" name="privacy" {{ contact.privacy?'checked' }} required&gt;
                Ich akzeptiere die Bestimmungen für den &lt;a href="{{ path('tos') }}" class="tos-link"&gt;Datenschutz&lt;/a&gt;.
            &lt;/label&gt;
                &lt;span class="form-error"&gt;Akzeptieren Sie die Bestimmungen zum Datenschutz.&lt;/span&gt;
        &lt;/div&gt;
        &lt;input type="submit" class="button" value="Senden"&gt;
    &lt;/form&gt;
Here is a suggestion:

var tosCheckbox = $('.tos-checkbox');
var checkBoxValidation = (function(label, checkbox, errorDisplay) {
    var checked = checkbox.is(':checked');
    return function(e) {
        if (e.type == 'submit' &amp;&amp; !checked) e.preventDefault();
        tosLabel.toggleClass('tos-is-checked', checked);
        formError.toggleClass('tos-error', !checked);
    }
})(tosLabel.closest('label'), tosCheckbox, formError.closest('label').find('.form-error'));

tosCheckbox.change(checkBoxValidation);
tosLabel.closest('form').submit(checkBoxValidation);


Baiscally I tried to make the code dependent/related to tosCheckbox, finding both label, error and form from that element. This avoids pointing to the wrong thing like '.form-error' which I see more than one in the page. This way only the one inside the label will receive the class.

DRYed also the event listener callbacks, the class add/remove and added a check to prevent the form submit event. Not sure you need this, but its a heads up in case you are not stoping the submit in case of error.

Hope it helps.