jQuery — Validation

Basic Validation

$("form").submit(function(e) {
    var name = $("#name").val();
    if (name === "") {
        alert("Name is required");
        e.preventDefault();
    }
});

jQuery Validate Plugin

$("form").validate({
    rules: {
        name: { required: true, minlength: 2 },
        email: { required: true, email: true },
        age: { required: true, number: true, min: 18 }
    },
    messages: {
        name: "Please enter your name",
        email: "Please enter a valid email",
        age: "You must be at least 18"
    }
});

Validation Rules

Rule	Description
required	Field must not be empty
email	Must be valid email format
url	Must be valid URL
number	Must be a number
minlength	Minimum character length
maxlength	Maximum character length
min	Minimum numeric value
max	Maximum numeric value

Custom Validation

$.validator.addMethod("phone", function(value) {
    return /^\d{10}$/.test(value);
}, "Please enter a valid 10-digit phone number");

Validate on Submit

if ($("form").valid()) {
    // Form is valid
    $("form").submit();
}

Highlighting Errors

$("form").validate({
    highlight: function(element) {
        $(element).addClass("error");
    },
    unhighlight: function(element) {
        $(element).removeClass("error");
    }
});

Mini Practice

1. Validate a form with required fields
2. Add email validation
3. Create a custom validation rule
4. Style error messages

Up Next

Continue with Forms — working with forms in jQuery.