I am trying to validate a form in my project with native JS

I am creating a function for every input validation

I created the first function to validate the user No. and it worked well

but when I created the user name validation function and tested it it shows the user No. error two times, and I tried to enter the No. and not enter the name and no errors displayed

Can anyone help me please?

this my code

$('#addUserBtn').click(function (e) {
    e.preventDefault();

    let valid = false;
    let errors = [];

    if (validateNo($('#userNoInput').val()) == true) {
        return true;
    } else {
        errors.push(validateNo($('#userNoInput').val()));
        console.log(errors);
    }

    if (validateName($('#userNameInput').val()) == true) {
        return true;
    } else {
        errors.push(validateName($('#userNameInput').val()));
        console.log(errors);
    }

    if (errors.length == 0) {
        valid = true;
    }

    if (valid == true) {
        let user = {
            no: $('#userNoInput').val(),
            name: $('#userNameInput').val(),
            email: $('#userEmailInput').val(),
            tel: $('#userTelInput').val(),
            dob: $('#userDobInput').val(),
            rmk: $('#userRmkInput').val(),
        }

        usersContainer.push(user);

        localStorage.setItem('myUsers', JSON.stringify(usersContainer));
        displayUsers();
        //clearForm();
    } else {
        let messages = Object.values(errors);
        let errorsMarkup = ""

        for (let i = 0; i < messages.length; i  ) {
            errorsMarkup  = `${messages[i]}`;
        }
        console.log(errorsMarkup);

        errorsMarkup = errorsMarkup.replace(/\./g, '<br>');

        Swal.fire({
            icon: 'error',
            title: 'خطأ...',
            confirmButtonText: 'حسناً',
            html: errorsMarkup
        });
    }
});

function validateNo(input) {
    if (input == '') {
        let error = "You must enter User No.";

        return error;
    }

    let reg = /^\d $/;
    if (reg.test(input) == false) {
        let error = "Not valid User No.";

        return error;
    }

    return true;
}

function validateName(input) {
    if (input == '') {
        let error = "You must enter User Name.";

        return error;
    }

    let reg = /^[a-z\s]{0,255}$/i;
    if (reg.test(input) == false) {
        let error = "Not valid User Name.";

        return error;
    }

    return true;
}

CodePudding user response：

In your validation of the name field, you're calling validateNo instead of validateName in the else.

if (validateName($('#userNameInput').val()) == true) {
    return true;
} else {
    errors.push(validateNo($('#userNameInput').val()));
    console.log(errors);
};

Additionally, you're returning from your function early. This means that if there is no validation error for validateNo it will return true and not validateName.

if (validateNo($('#userNoInput').val()) == true) {
        return true;
    } else {
        errors.push(validateNo($('#userNoInput').val()));
        console.log(errors);
    }

    if (validateNo($('#userNoInput').val()) == true) {
            return true;
        } else {
            errors.push(validateNo($('#userNoInput').val()));
            console.log(errors);
        }
    
        if (validateName($('#userNameInput').val()) == true) {
            return true;
        } else {
            errors.push(validateName($('#userNameInput').val()));
            console.log(errors);
        }

I would suggest changing your code to something like:

if (validateNo($('#userNoInput').val()) == true) {
errors.push(validateNo($('#userNoInput').val()));
console.log(errors);
}

if (validateName($('#userNameInput').val()) == true) {
errors.push(validateName($('#userNameInput').val()));
console.log(errors);
}

CodePudding user response：

You are ending your function if the userNoInput input is validated because of the return true in the if block.

if (validateNo($('#userNoInput').val()) == true) {
    return true; // This ends the function early, you want the function to keep going to validate the other fields
} else {
    errors.push(validateNo($('#userNoInput').val()));
    console.log(errors);
}

You need to remove the return true, just check if the individual validation functions return false, and keep going until all checks are done.

Then after the individual validations, check if the errors array is empty. If it is empty, it means there are no errors.