How to prevent input of numbers in a form using javascript

ghz 7months ago ⋅ 43 views

This is the part of my multi-step registration form, and it working fine. But I want to add a number validation to the "student_name" variable, so the system will prevent the student to input the number in their name.

if (step === 2) {
    // Example: check if username is not empty
    var student_name = document.querySelector('#student_name').value;
    if (student_name === '') {
        isValid = false;
        Swal.fire({
            icon: 'error',
            title: 'Field still empty'
        });
    } else if (student_name.length < 3 || student_name.length > 30) {
        isValid = false;
        Swal.fire({
            icon: 'info',
            title: 'the character must <3 or >30'
        });
    } else
        var student_email = document.querySelector('#student_email').value;
    if (student_email === '') {
        isValid = false;
        Swal.fire({
            icon: 'error',
            title: 'Field still empty'
        });
    } else if (!student_email.includes('@')) {
        isValid = false;
        Swal.fire({
            icon: 'error',
            title: 'Email must include "@"'
        });
    }
}

So I added this code that I got it from the ai.

if (/\d/.test(student_name)) {
    isValid = false;

    // Display an error message using SweetAlert
    Swal.fire({
        icon: 'error',
        title: 'Error',
        text: 'number is not allowed in student name.'
    });
}

So this is my code after I add that code.

if (step === 2) {
    // Example: check if username is not empty
    var student_name = document.querySelector('#student_name').value;
    if (student_name === '') {
        isValid = false;
        Swal.fire({
            icon: 'error',
            title: 'Field still empty'
        });
    } else if (student_name.length < 3 || student_name.length > 30) {
        isValid = false;
        Swal.fire({
            icon: 'info',
            title: 'the character must <3 or >30'
        });
    }
    // new added code (start)
     else if (/\d/.test(student_name)) {
        isValid = false;
    
        // Display an error message using SweetAlert
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'number is not allowed in student name'
        });
    }
    // new added code (end)
     else
        var student_email = document.querySelector('#student_email').value;
    if (student_email === '') {
        isValid = false;
        Swal.fire({
            icon: 'error',
            title: 'Field still empty'
        });
    } else if (!student_email.includes('@')) {
        isValid = false;
        Swal.fire({
            icon: 'error',
            title: 'Email must include "@"'
        });
    }
}

But it didn't work - there is no error message.

Answers

It seems like the issue might be related to the structure of your if statements. You need to ensure that the validation for the student name is performed before moving on to the next field (student_email). In your current code, the else block after the validation for the student name immediately jumps to checking the student_email without considering the result of the student name validation.

Here's how you can adjust your code to ensure proper validation flow:

if (step === 2) {
    // Example: check if student_name is not empty
    var student_name = document.querySelector('#student_name').value;
    if (student_name === '') {
        isValid = false;
        Swal.fire({
            icon: 'error',
            title: 'Field still empty'
        });
    } else if (student_name.length < 3 || student_name.length > 30) {
        isValid = false;
        Swal.fire({
            icon: 'info',
            title: 'The character must be between 3 and 30'
        });
    } else if (/\d/.test(student_name)) { // Check if student name contains a number
        isValid = false;
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Numbers are not allowed in student name'
        });
    } else {
        // Proceed to check student_email
        var student_email = document.querySelector('#student_email').value;
        if (student_email === '') {
            isValid = false;
            Swal.fire({
                icon: 'error',
                title: 'Field still empty'
            });
        } else if (!student_email.includes('@')) {
            isValid = false;
            Swal.fire({
                icon: 'error',
                title: 'Email must include "@"'
            });
        }
    }
}

By rearranging the if conditions and ensuring that the number validation for the student name comes before proceeding to check the email field, you can ensure that the validation works as expected.

#forms