jQuery Validator: Stack Overflow Question

http://stackoverflow.com/q/25054942/1093087

HTML

<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
<form class="setUsername-form">
    <input type="text" name="chosenUsername" />
    <button class="submit-form">submit</button>
</form>

<div class="form-status">form not yet submitted</div>

JavaScript

var errorMessage = "Your username can only contain letters, numbers and hyphens.<br />Spaces and special characters are not permitted.";

$.validator.addMethod("alphanumeric", function (value, element) {
    return this.optional(element) || /^[a-zA-Z0-9\-]+$/i.test(value);
}, errorMessage);

function validateForm() {
    var $form = $('form.setUsername-form');
    $form.validate({
        errorElement: 'label', //default input error message container
        errorClass: 'help-inline', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",
        rules: {
            chosenUsername: {
                required: true,
                minlength: 4,
                alphanumeric: true
            }
        },
    });

    if ($form.valid()) {
        $('div.form-status').css('color', 'green').text('form is valid');
    } else {
        $('div.form-status').css('color', 'red').text('form is invalid');
    }

    return false;
}

$('button.submit-form').on('click', validateForm);