Stop refresh after clicking submit form

Question

Was trying to fill all the form before refreshing ! I mean if the name is wrong i dont want the page to refresh by hitting submit, i want it to wait until i fill all the inputs and they all go right !

I tried return false after every if statement but dosent work i tried e.preventDefault neither works ! Any help ?

            function validateForm(){
                var name = document.loginForm.name.value
                var email = document.loginForm.email.value
                var password = document.loginForm.password.value
                var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    
                if (name.length == 0)
                    return alert("Name wrong");
                else if (re.test(email) == false)
                    return alert('Enter a valid email');
                else if (password.length < 6)
                    return alert('password should be more than 6 characters');
                else 
                    return alert('Form submitted')
            }

    <div>
            <form action="" name="loginForm" onsubmit=validateForm()>
    
                <label for="">name</label>
                <input name="name" type="text">
                <label for="">email</label>
                <input name="email" type="email">
                <label for="">password</label>
                <input name="password" type="password">
                <button type="submit">Submit</button>
                <button type="reset">reset</button>
                
            </form>
        </div>

Add required attribute on every input – zer00ne Apr 09 '22 at 11:15 — zer00ne, Apr 09 '22 at 11:15
Please do some basic searching before asking. – Heretic Monkey Apr 11 '22 at 01:56 — Heretic Monkey, Apr 11 '22 at 01:56

score 1 · Answer 1 · answered Apr 09 '22 at 11:17

You need to prevent the default behavior of submitting a form using the event object. Inside your validateForm() function:

 function validateForm(e){
            e.preventDefault();
            ...
        }

Make sure you're taking the event object as a parameter inside the function. This will prevent the page from refreshing every time the form is submitted.

Stop refresh after clicking submit form

1 Answers1