Pure jQuery for form validation: Letters-only name field

Other Questions API
1

Hey everyone! I’m working on a website and I’ve hit a snag with the registration form. I want to make sure the name field only accepts letters, but I’m having trouble figuring out how to do it with just jQuery.

I know there are plugins and UI libraries out there, but I’m trying to keep things simple and lightweight. So I’m looking for a solution using only the core jQuery API.

Has anyone done something like this before? Any tips or code snippets would be super helpful! I’ve tried a few things, but nothing seems to work quite right.

Here’s a basic example of what I’m working with:

$('#nameInput').on('input', function() {
    var input = $(this).val();
    // Need help with validation logic here
    if (/* input is valid */) {
        $(this).removeClass('error');
    } else {
        $(this).addClass('error');
    }
});

Thanks in advance for any help!

2

I’ve dealt with this exact issue in a project recently. Here’s what worked for me:

$(‘#nameInput’).on(‘keypress’, function(e) {
var char = String.fromCharCode(e.which);
if (!/[a-zA-Z]/.test(char)) {
e.preventDefault();
}
});

This approach prevents non-letter characters from being entered in the first place. It’s less jarring for users than removing characters after they’ve been typed.

One caveat: this doesn’t catch pasted text. For that, you might want to add an additional check on the ‘paste’ event. Something like:

$(‘#nameInput’).on(‘paste’, function(e) {
setTimeout(function() {
var text = $(e.target).val();
$(e.target).val(text.replace(/[^a-zA-Z]/g, ‘’));
}, 0);
});

This gives you comprehensive coverage without being too intrusive. Hope this helps!

3

Hey zack, i’ve got a quick fix for ya! try this:

$(‘#nameInput’).on(‘input’, function() {
$(this).val($(this).val().replace(/[^a-zA-Z]/g, ‘’));
});

this’ll remove any non-letter characters as they’re typed. simple and works like a charm! lemme know if u need anything else

4

I’ve implemented this kind of validation before, and here’s a straightforward approach using jQuery:

$('#nameInput').on('input', function() {
    var input = $(this).val();
    if (/^[a-zA-Z\s]*$/.test(input)) {
        $(this).removeClass('error');
    } else {
        $(this).addClass('error');
    }
});

This uses a regular expression to check if the input contains only letters and spaces. The regex ^[a-zA-Z\s]*$ ensures the entire string (from start ^ to end $) consists of only uppercase and lowercase letters, along with spaces.

Remember to also validate on form submission to catch any final errors before sending data to the server. This client-side validation improves user experience but shouldn’t replace server-side validation for security.