jQuery addClass example

Change class name on click in jQuery

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<form class="form-validate">
    <div class="form-errors">
        <h3>Errors:</h3>
        <ul></ul>
    </div>
    <h3>All fields required:</h3>
    <div class="form-field">
        <input type="text" name="q" id="f-q" placeholder="Required text field" required>
    </div>
    <div class="form-field">
        <input type="email" name="w" id="f-w" placeholder="Required email field" required>
    </div>
    <div class="form-field">
        <input type="text" name="e" id="f-e" placeholder="Required text field" required>
    </div>
    <input type="submit">
</form>

JavaScript

$(document).ready(function() {

    var names = ""; // create empty string
    $('[id^="f-"]').each(function() { // grab each input starting w/ the class
        names += $(this).attr('name') + " "; // append each name + single space to string
    });
    names = $.trim(names); // remove the empty space from the end

    $('.form-validate').validate({
        errorContainer: $(this).find('.form-errors'),
        errorLabelContainer: $('ul', $(this).find('.form-errors')),
        wrapper: 'li',
        groups: {
            myGroup: names
        }
    });

});

$.extend($.validator.messages, {
    required: "Fill all marked fields please"
});