jQuery Validator: Basic Example

HTML

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

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

JavaScript

var errorMessage = "Field can only contain letters, numbers, and hyphens.";
$.validator.addMethod("alphanumeric", function (value, element) {
    return this.optional(element) || /^[a-zA-Z0-9\-]+$/i.test(value);
}, errorMessage);

function validateForm() {
    $form = $('form.validation-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: {
            username: {
                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);