The JavaScript Validation API provides built-in browser validation for HTML forms without needing complex JavaScript. It helps validate user input before submission and provides user-friendly error messages.

Basic Methods

checkValidity() Method

setCustomValidity() Method

1. Basic Validation Example

<!DOCTYPE html>
<html>
<head>
    <style>
        .valid { border: 2px solid green; }
        .invalid { border: 2px solid red; }
        .error { color: red; font-size: 14px; }
    </style>
</head>
<body>
    <h2>Form Validation Example</h2>

    <form id="myForm">
        <div>
            <label for="email">Email (required):</label>
            <input type="email" id="email" required>
            <div id="emailError" class="error"></div>
        </div>

        <div>
            <label for="age">Age (18-65):</label>
            <input type="number" id="age" min="18" max="65">
            <div id="ageError" class="error"></div>
        </div>

        <button type="submit">Submit</button>
        <button type="button" onclick="checkForm()">Validate Form</button>
    </form>

    <script>
        const emailInput = document.getElementById('email');
        const ageInput = document.getElementById('age');

        // Using checkValidity()
        function checkForm() {
            // Check individual field
            if (emailInput.checkValidity()) {
                console.log("Email is valid");
                emailInput.classList.remove('invalid');
                emailInput.classList.add('valid');
            } else {
                console.log("Email is invalid");
                emailInput.classList.remove('valid');
                emailInput.classList.add('invalid');
                document.getElementById('emailError').textContent = emailInput.validationMessage;
            }

            // Check entire form
            const form = document.getElementById('myForm');
            if (form.checkValidity()) {
                alert("All fields are valid!");
            } else {
                alert("Please fix errors before submitting.");
            }
        }

        // Using setCustomValidity()
        emailInput.addEventListener('input', function() {
            if (this.value.includes('example.com')) {
                this.setCustomValidity('Email from example.com domain is not allowed');
            } else {
                this.setCustomValidity(''); // Clear custom message
            }
        });

        // Form submission
        document.getElementById('myForm').addEventListener('submit', function(e) {
            if (!this.checkValidity()) {
                e.preventDefault();
                alert('Please fix form errors before submitting.');
            }
        });
    </script>
</body>
</html>

2. Constraint Validation DOM Properties

| Property | Description | Type | |----------|-------------|------| | validationMessage | Returns the error message that would be displayed | string | | validity | Returns a ValidityState object containing validation properties | object | | willValidate | Indicates whether the element will be validated | boolean | | checkValidity() | Returns true if element's value has no validity problems | method | | reportValidity() | Reports invalid field to user (shows validation message) | method | | setCustomValidity(message) | Sets a custom validation message | method |

3. ValidityState Properties

The validity property returns a ValidityState object with these boolean properties:

| Property | Description | Triggered When | |----------|-------------|----------------| | valueMissing | Value is missing but required | required attribute present but empty | | typeMismatch | Value doesn't match expected type | Email/URL format incorrect | | patternMismatch | Value doesn't match pattern | pattern regex doesn't match | | tooLong | Value exceeds maxLength | Input longer than maxlength | | tooShort | Value is shorter than minLength | Input shorter than minlength | | rangeUnderflow | Value is less than min | Number below min attribute | | rangeOverflow | Value is greater than max | Number above max attribute | | stepMismatch | Value doesn't fit step rules | Doesn't match step increment | | badInput | Browser can't convert value | Invalid numeric input | | customError | Custom validity set | setCustomValidity() used | | valid | All validity constraints are satisfied | All checks pass |

4. Complete Validity Check Example

<!DOCTYPE html>
<html>
<head>
    <style>
        table { border-collapse: collapse; width: 100%; margin: 20px 0; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        .valid { background-color: #d4edda; }
        .invalid { background-color: #f8d7da; }
    </style>
</head>
<body>
    <h2>Complete Validity State Checker</h2>

    <form id="validationForm">
        <div>
            <label for="fullName">Full Name (required, min 3 chars):</label>
            <input type="text" id="fullName" required minlength="3">
        </div>

        <div>
            <label for="userEmail">Email:</label>
            <input type="email" id="userEmail">
        </div>

        <div>
            <label for="score">Score (0-100, step 5):</label>
            <input type="number" id="score" min="0" max="100" step="5" value="105">
        </div>

        <div>
            <label for="username">Username (alphanumeric only):</label>
            <input type="text" id="username" pattern="[A-Za-z0-9]+">
        </div>

        <button type="button" onclick="checkAllValidity()">Check All Validity States</button>
    </form>

    <div id="results"></div>

    <script>
        function checkAllValidity() {
            const inputs = [
                document.getElementById('fullName'),
                document.getElementById('userEmail'),
                document.getElementById('score'),
                document.getElementById('username')
            ];

            let resultsHTML = '<h3>Validity State Results:</h3><table>';
            resultsHTML += '<tr><th>Field</th><th>Value</th><th>Valid</th><th>All Validity Properties</th></tr>';

            inputs.forEach(input => {
                const validity = input.validity;
                const isValid = input.checkValidity();

                resultsHTML += `<tr class="${isValid ? 'valid' : 'invalid'}">
                    <td>${input.id}</td>
                    <td>${input.value || '(empty)'}</td>
                    <td>${isValid ? '✓ Valid' : '✗ Invalid'}</td>
                    <td>
                        valueMissing: ${validity.valueMissing}<br>
                        typeMismatch: ${validity.typeMismatch}<br>
                        patternMismatch: ${validity.patternMismatch}<br>
                        tooLong: ${validity.tooLong}<br>
                        tooShort: ${validity.tooShort}<br>
                        <strong>rangeUnderflow: ${validity.rangeUnderflow}</strong><br>
                        <strong>rangeOverflow: ${validity.rangeOverflow}</strong><br>
                        stepMismatch: ${validity.stepMismatch}<br>
                        badInput: ${validity.badInput}<br>
                        customError: ${validity.customError}<br>
                        valid: ${validity.valid}
                    </td>
                </tr>`;
            });

            resultsHTML += '</table>';
            document.getElementById('results').innerHTML = resultsHTML;
        }
    </script>
</body>
</html>

5. The rangeUnderflow Property Example

<!DOCTYPE html>
<html>
<body>
    <h2>rangeUnderflow Example (Minimum Value Check)</h2>

    <label for="temperature">Enter temperature (min 15°C):</label>
    <input type="number" id="temperature" min="15" value="10">
    <button onclick="checkTemperature()">Check Temperature</button>

    <p id="message"></p>

    <script>
        function checkTemperature() {
            const tempInput = document.getElementById('temperature');
            const message = document.getElementById('message');

            if (tempInput.validity.rangeUnderflow) {
                message.innerHTML = `
                    <span style="color: red;">
                    ❌ Too cold! Temperature must be at least ${tempInput.min}°C.
                    Your input (${tempInput.value}°C) is below the minimum.
                    </span>
                `;
            } else {
                message.innerHTML = `
                    <span style="color: green;">
                    ✓ Temperature ${tempInput.value}°C is acceptable.
                    </span>
                `;
            }
        }

        // Check on input change
        document.getElementById('temperature').addEventListener('input', checkTemperature);

        // Initial check
        checkTemperature();
    </script>
</body>
</html>

6. The rangeOverflow Property Example

<!DOCTYPE html>
<html>
<body>
    <h2>rangeOverflow Example (Maximum Value Check)</h2>

    <label for="quantity">Order quantity (max 10 items):</label>
    <input type="number" id="quantity" min="1" max="10" value="15">
    <button onclick="checkQuantity()">Check Quantity</button>

    <p id="quantityMessage"></p>

    <h3>Stock Inventory Example</h3>
    <label for="stockOrder">Order stock (max 100 units in stock):</label>
    <input type="number" id="stockOrder" min="1" max="100">
    <span id="stockStatus"></span>

    <script>
        function checkQuantity() {
            const quantityInput = document.getElementById('quantity');
            const message = document.getElementById('quantityMessage');

            if (quantityInput.validity.rangeOverflow) {
                message.innerHTML = `
                    <span style="color: red;">
                    ⚠️ Order too large! Maximum ${quantityInput.max} items allowed.
                    You requested ${quantityInput.value} items.
                    </span>
                `;
            } else {
                message.innerHTML = `
                    <span style="color: green;">
                    ✓ Order for ${quantityInput.value} items is acceptable.
                    </span>
                `;
            }
        }

        // Real-time stock check example
        const stockOrderInput = document.getElementById('stockOrder');
        const stockStatus = document.getElementById('stockStatus');

        stockOrderInput.addEventListener('input', function() {
            if (this.validity.rangeOverflow) {
                stockStatus.innerHTML = `
                    <span style="color: red; font-weight: bold;">
                    Out of stock! We only have ${this.max} units available.
                    </span>
                `;
            } else if (this.value > 80) {
                stockStatus.innerHTML = `
                    <span style="color: orange;">
                    Low stock warning: Only ${100 - this.value} units left after your order.
                    </span>
                `;
            } else {
                stockStatus.innerHTML = `
                    <span style="color: green;">
                    ✓ Stock available
                    </span>
                `;
            }
        });

        // Initial checks
        checkQuantity();
        stockOrderInput.dispatchEvent(new Event('input'));
    </script>
</body>
</html>

7. Complete Range Validation Example (Both Underflow & Overflow)

<!DOCTYPE html>
<html>
<head>
    <style>
        .meter {
            width: 300px;
            height: 30px;
            background: #ddd;
            border-radius: 15px;
            margin: 10px 0;
            position: relative;
        }

        .meter-fill {
            height: 100%;
            border-radius: 15px;
            transition: width 0.3s;
        }

        .safe { background: #4CAF50; }
        .warning { background: #ff9800; }
        .danger { background: #f44336; }

        .marker {
            position: absolute;
            height: 40px;
            width: 2px;
            top: -5px;
        }

        .min-marker { left: 20%; background: blue; }
        .max-marker { left: 80%; background: red; }
    </style>
</head>
<body>
    <h2>Complete Range Validation: Exam Score System</h2>

    <div>
        <label for="examScore">Enter exam score (0-100):</label>
        <input type="range" id="examScore" min="0" max="100" value="50" step="1">
        <input type="number" id="scoreInput" min="0" max="100" value="50">
        <span id="scoreValue">50</span>/100
    </div>

    <div class="meter">
        <div id="meterFill" class="meter-fill" style="width: 50%"></div>
        <div class="marker min-marker" title="Minimum (20)"></div>
        <div class="marker max-marker" title="Maximum (80)"></div>
    </div>

    <div>
        <strong>Validation Rules:</strong><br>
        • Minimum acceptable score: <span id="minScore" style="color: blue;">20</span><br>
        • Maximum possible score: <span id="maxScore" style="color: red;">80</span><br>
        • Current score: <span id="currentScore">50</span>
    </div>

    <div id="validationResult" style="margin: 20px 0; padding: 10px; border-radius: 5px;"></div>

    <button onclick="validateRange()">Validate Score</button>
    <button onclick="setCustomRange()">Test Custom Range (15-85)</button>

    <script>
        const scoreInput = document.getElementById('scoreInput');
        const scoreSlider = document.getElementById('examScore');
        const meterFill = document.getElementById('meterFill');

        // Sync slider and number input
        scoreSlider.addEventListener('input', function() {
            scoreInput.value = this.value;
            updateDisplay();
        });

        scoreInput.addEventListener('input', function() {
            scoreSlider.value = this.value;
            updateDisplay();
        });

        function updateDisplay() {
            const value = scoreInput.value;
            document.getElementById('scoreValue').textContent = value;
            document.getElementById('currentScore').textContent = value;

            // Update meter
            const percentage = (value / 100) * 100;
            meterFill.style.width = percentage + '%';

            // Update meter color based on value
            if (value < 20) {
                meterFill.className = 'meter-fill danger';
            } else if (value > 80) {
                meterFill.className = 'meter-fill warning';
            } else {
                meterFill.className = 'meter-fill safe';
            }

            // Auto-validate
            validateRange();
        }

        function validateRange() {
            const resultDiv = document.getElementById('validationResult');
            const value = parseInt(scoreInput.value);

            // Set custom min/max for this example
            scoreInput.setAttribute('min', '20');
            scoreInput.setAttribute('max', '80');

            // Check validity
            const isUnderflow = scoreInput.validity.rangeUnderflow;
            const isOverflow = scoreInput.validity.rangeOverflow;

            let message = '';
            let color = '';

            if (isUnderflow) {
                message = `❌ Score too low! Minimum score is 20. Your score: ${value}`;
                color = '#f8d7da';
            } else if (isOverflow) {
                message = `⚠️ Score above maximum! Maximum allowed is 80. Your score: ${value}`;
                color = '#fff3cd';
            } else {
                message = `✓ Score ${value} is within acceptable range (20-80)`;
                color = '#d4edda';
            }

            resultDiv.innerHTML = `<div style="background: ${color}; padding: 10px; border-radius: 5px;">
                <strong>Validation Result:</strong><br>${message}
            </div>`;

            // Show detailed validity state
            console.log('Validity State:', {
                value: value,
                rangeUnderflow: isUnderflow,
                rangeOverflow: isOverflow,
                valid: scoreInput.validity.valid,
                validationMessage: scoreInput.validationMessage
            });
        }

        function setCustomRange() {
            scoreInput.setAttribute('min', '15');
            scoreInput.setAttribute('max', '85');
            document.getElementById('minScore').textContent = '15';
            document.getElementById('maxScore').textContent = '85';
            document.getElementById('minScore').style.color = 'blue';
            document.getElementById('maxScore').style.color = 'red';

            // Update meter markers
            document.querySelector('.min-marker').style.left = '15%';
            document.querySelector('.max-marker').style.left = '85%';

            alert('Range changed to 15-85. Try entering values outside this range.');
            validateRange();
        }

        // Initialize
        updateDisplay();
    </script>
</body>
</html>

8. Practical Application: Registration Form with Validation

<!DOCTYPE html>
<html>
<head>
    <style>
        .form-group { margin: 15px 0; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input { padding: 8px; width: 300px; border: 2px solid #ddd; border-radius: 4px; }
        input:valid { border-color: #4CAF50; }
        input:invalid { border-color: #f44336; }
        .error-message { color: #f44336; font-size: 14px; margin-top: 5px; }
        .hint { color: #666; font-size: 12px; font-style: italic; }
        button { padding: 10px 20px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; }
    </style>
</head>
<body>
    <h2>User Registration Form with JavaScript Validation API</h2>

    <form id="registrationForm" novalidate>
        <div class="form-group">
            <label for="regUsername">Username:</label>
            <input type="text" id="regUsername" 
                   required 
                   minlength="3" 
                   maxlength="20"
                   pattern="[A-Za-z0-9_]+">
            <div class="hint">3-20 characters, letters, numbers, underscores only</div>
            <div class="error-message" id="usernameError"></div>
        </div>

        <div class="form-group">
            <label for="regAge">Age:</label>
            <input type="number" id="regAge" 
                   min="13" 
                   max="120"
                   required>
            <div class="hint">Must be between 13 and 120 years</div>
            <div class="error-message" id="ageError"></div>
        </div>

        <div class="form-group">
            <label for="regEmail">Email:</label>
            <input type="email" id="regEmail" required>
            <div class="error-message" id="emailError"></div>
        </div>

        <div class="form-group">
            <label for="regPassword">Password:</label>
            <input type="password" id="regPassword" 
                   required
                   minlength="8"
                   pattern="^(?=.*[A-Za-z])(?=.*\d).{8,}$">
            <div class="hint">Minimum 8 characters, at least one letter and one number</div>
            <div class="error-message" id="passwordError"></div>
        </div>

        <button type="submit">Register</button>
        <button type="button" onclick="validateAllFields()">Validate All</button>
    </form>

    <div id="formStatus" style="margin-top: 20px;"></div>

    <script>
        const form = document.getElementById('registrationForm');
        const inputs = {
            username: document.getElementById('regUsername'),
            age: document.getElementById('regAge'),
            email: document.getElementById('regEmail'),
            password: document.getElementById('regPassword')
        };

        // Real-time validation
        Object.values(inputs).forEach(input => {
            input.addEventListener('input', function() {
                validateField(this);
            });

            input.addEventListener('blur', function() {
                validateField(this);
            });
        });

        function validateField(input) {
            const errorId = input.id + 'Error';
            const errorElement = document.getElementById(errorId);

            if (input.checkValidity()) {
                errorElement.textContent = '';
                return true;
            } else {
                let message = input.validationMessage;

                // Custom messages based on validity state
                const validity = input.validity;

                if (validity.rangeUnderflow) {
                    message = `Value must be at least ${input.min}`;
                } else if (validity.rangeOverflow) {
                    message = `Value must be at most ${input.max}`;
                } else if (validity.patternMismatch) {
                    message = 'Invalid format. Please check the requirements.';
                }

                errorElement.textContent = message;
                return false;
            }
        }

        function validateAllFields() {
            let allValid = true;

            Object.values(inputs).forEach(input => {
                if (!validateField(input)) {
                    allValid = false;
                }
            });

            const statusDiv = document.getElementById('formStatus');
            if (allValid) {
                statusDiv.innerHTML = '<div style="color: green; padding: 10px; background: #d4edda;">✓ All fields are valid!</div>';
            } else {
                statusDiv.innerHTML = '<div style="color: #856404; padding: 10px; background: #fff3cd;">⚠️ Please fix the errors highlighted above.</div>';
            }

            // Show detailed validity states
            console.log('Detailed Validity States:');
            Object.entries(inputs).forEach(([name, input]) => {
                console.log(`${name}:`, {
                    value: input.value,
                    valid: input.validity.valid,
                    rangeUnderflow: input.validity.rangeUnderflow,
                    rangeOverflow: input.validity.rangeOverflow,
                    validationMessage: input.validationMessage
                });
            });

            return allValid;
        }

        // Form submission
        form.addEventListener('submit', function(e) {
            e.preventDefault();

            if (validateAllFields()) {
                alert('Form submitted successfully!');
                // Here you would typically send data to server
                console.log('Form data:', {
                    username: inputs.username.value,
                    age: inputs.age.value,
                    email: inputs.email.value,
                    password: inputs.password.value
                });
            }
        });

        // Initialize with some validation
        validateAllFields();
    </script>
</body>
</html>

Key Takeaways

Best Practices

The JavaScript Validation API provides a powerful, built-in way to validate forms with minimal code, while still allowing for complex custom validation when needed.

JavaScript Validation API: Complete Guide with Examples

Introduction to JavaScript Validation API

Basic Methods

`checkValidity()` Method

`setCustomValidity()` Method

1. Basic Validation Example

2. Constraint Validation DOM Properties

3. ValidityState Properties

4. Complete Validity Check Example

5. The `rangeUnderflow` Property Example

6. The `rangeOverflow` Property Example

7. Complete Range Validation Example (Both Underflow & Overflow)

8. Practical Application: Registration Form with Validation

Key Takeaways

Best Practices

JavaScript Validation API: Complete Guide with Examples

Introduction to JavaScript Validation API

Basic Methods

checkValidity() Method

setCustomValidity() Method

1. Basic Validation Example

2. Constraint Validation DOM Properties

3. ValidityState Properties

4. Complete Validity Check Example

5. The rangeUnderflow Property Example

6. The rangeOverflow Property Example

7. Complete Range Validation Example (Both Underflow & Overflow)

8. Practical Application: Registration Form with Validation

Key Takeaways

Best Practices

`checkValidity()` Method

`setCustomValidity()` Method

5. The `rangeUnderflow` Property Example

6. The `rangeOverflow` Property Example