How to Validate User Input on Keypress Event in Vue.js with Laravel

To validate user input on the keypress event in Vue.js within a Laravel project, you can use Vue directives like @keypress or v-on:keypress to capture and validate the input.

✅ Example 1: Allow Only Numbers

If you want to restrict the input to numbers:

<template>
    <div>
        <label>Enter Number:</label>
        <input
            type="text"
            v-model="number"
            @keypress="validateNumber"
            placeholder="Only numbers allowed"
        />
        <p v-if="error">{{ error }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            number: '',
            error: ''
        };
    },
    methods: {
        validateNumber(event) {
            const charCode = event.keyCode || event.which;

            // Allow only digits (0-9)
            if (charCode < 48 || charCode > 57) {
                this.error = 'Only numbers are allowed!';
                event.preventDefault();
            } else {
                this.error = '';
            }
        },
    },
};
</script>

<style>
p {
    color: red;
}
</style>

✅ Example 2: Allow Only Letters

If you want to restrict input to alphabet characters:

<template>
    <div>
        <label>Enter Text:</label>
        <input
            type="text"
            v-model="text"
            @keypress="validateText"
            placeholder="Only letters allowed"
        />
        <p v-if="error">{{ error }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            text: '',
            error: ''
        };
    },
    methods: {
        validateText(event) {
            const char = String.fromCharCode(event.keyCode || event.which);
            const pattern = /^[a-zA-Z]*$/; // Regex for letters only

            if (!pattern.test(char)) {
                this.error = 'Only letters are allowed!';
                event.preventDefault();
            } else {
                this.error = '';
            }
        },
    },
};
</script>

✅ Example 3: Validate Input Length

To limit input length (e.g., max 10 characters):

<template>
    <div>
        <label>Enter Name (Max 10 chars):</label>
        <input
            type="text"
            v-model="name"
            @keypress="limitLength"
            placeholder="Max 10 characters"
        />
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: '',
        };
    },
    methods: {
        limitLength(event) {
            if (this.name.length >= 10) {
                event.preventDefault(); // Stop further input
            }
        },
    },
};
</script>

✅ Example 4: Validate Email Pattern

If you want to validate email on the fly:

<template>
    <div>
        <label>Email:</label>
        <input
            type="text"
            v-model="email"
            @keypress="validateEmail"
            placeholder="Enter your email"
        />
        <p v-if="error">{{ error }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            email: '',
            error: '',
        };
    },
    methods: {
        validateEmail() {
            const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

            if (!emailPattern.test(this.email)) {
                this.error = 'Invalid email address!';
            } else {
                this.error = '';
            }
        },
    },
};
</script>

✅ Laravel Validation Example

If you want to validate input on the server-side using Laravel, you can pass the input to a Laravel route and validate it.

routes/web.php

use Illuminate\Http\Request;

Route::post('/validate-input', function (Request $request) {
    $request->validate([
        'name' => 'required|string|max:10',
    ]);

    return response()->json(['message' => 'Valid input']);
});

Would you like a more advanced validation or have any other input requirements? 😊