How to display all errors on submit with javascript

Question

I will like to know how can I display all of my validated errors at once when user submit a form. Until here, it works fine but it shows the errors one by one.

const form = document.getElementsByTagName('form')[0];
let errorMessages = [
                    "please fill in your name here", 
                    "please, fill in your email correct here", 

                    ];
const reg = /^\d+$/;

form.addEventListener('submit', function(e){
    if(valName.value !== ''){
        valName.nextElementSibling.textContent = '';
        valName.className = '';
    } else {
        e.preventDefault();
        valName.nextElementSibling.textContent = errorMessages[0];
        valName.className = 'errorborder';
        return false;
    }
    if(valEmail.value.indexOf('@') != -1 && this.value.indexOf('.') != -1){
        valEmail.nextElementSibling.textContent = '';
        valEmail.className = '';
    } else {
        e.preventDefault();
        valEmail.nextElementSibling.textContent = errorMessages[1];
        valEmail.className = 'errorborder';
        return false;
    }
});

many thanks in advance!

Have you ever heard of DRY? Whenever you see a pattern (such as you have in your else block statements), there's a chance you can rewrite your code more dynamically. Try to find a way to write e.preventDefault();, valEmail.nextElementSibling.textContent = errorMessages[1]; valEmail.className = 'errorborder';, return false; only once. What's different? — Adelin
– Adelin, Commented Dec 19, 2017 at 10:24

Lasse · Accepted Answer · 2017-12-19 21:34:40Z

1

You have to remove your returns - otherwise the code will stop there. I have also moved codes into functions instead of copying.

    const form = document.getElementsByTagName('form')[0];
    let errorMessages = [
                        "please fill in your name here", 
                        "please, fill in your email correct here", 

                        ];

    const reg = /^\d+$/;

    function isEmailValid(email){
        return email.indexOf('@') != -1 && email.indexOf('.') != -1;
    }

    function isNameValid(name){
        return name !== ''
    }

    function setErrorMessage(el, errorMessage){
        el.nextElementSibling.textContent = errorMessage;
        el.className = 'errorborder';
    }

    function clearError(el){
        el.nextElementSibling.textContent = '';
        el.className = '';
    }

    form.addEventListener('submit', function(e){
        var validName = isNameValid(valName.value);
        var validEmail = isEmailValid(valEmail.value);

        if(!validName){
            setErrorMessage(valName, errorMessages[0]); 
        }else{
            clearError(valName);
        }

        if(!validEmail){
            setErrorMessage(valEmail, errorMessages[1]); 
        }else{
            clearError(valEmail);
        }

        if(!validName || !validEmail) {
            e.preventDefault(); 
            return false;
        }
    })

edited Dec 19, 2017 at 21:34

answered Dec 19, 2017 at 10:36

Lasse

2142 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Olivia P. Over a year ago

hi @Lasse, i just tried your code it works good many thanks! but now it shows just the errorMessages[0] in all error messages

Lasse Over a year ago

Hello, it should be working now - in the setErrorMessage-function it said errorMessages[0] instead of errorMessage :)

Amal · Accepted Answer · 2017-12-19 10:24:25Z

1

You can store all the errors in a string variable and display all of them at once.

form.addEventListener('submit', function(e){
        var errors = "";
        if(valName.value !== ''){
                    valName.nextElementSibling.textContent = '';
                    valName.className = '';
                }
                else{
                    e.preventDefault();
                    errors += errorMessages[0];
                }
                if(valEmail.value.indexOf('@') != -1 && this.value.indexOf('.') != -1){
                    valEmail.nextElementSibling.textContent = '';
                    valEmail.className = '';
                }else{
                    e.preventDefault();
                    errors += errorMessages[1];

                }
            if(errors !== ""){
               valName.className = 'errorborder';
               valName.nextElementSibling.textContent = errors.
               return false;
            }
    })

answered Dec 19, 2017 at 10:24

Amal

2781 silver badge12 bronze badges

1 Comment

Olivia P. Over a year ago

thank you @Amal ! it works fine the only problem is now.... the errors variable will show all erros inside and ignore statement above . exemplo: code if(valName.value !== ''){ valName.nextElementSibling.textContent = ''; valName.className = ''; } code

Collectives™ on Stack Overflow

How to display all errors on submit with javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related