jQuery Validator: Basic Example

Form Validation

by Julian

HTML

<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
<form class="myform">
    <input type="text" name="username" />
    <input type="text" name="email" />
    <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.";


function validateForm() {
    $form = $('form.myform');
    $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: 2,
              
            }
        },
    });

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