Form object in the console gets deleted on submit

Question

This is my form and I am trying to output the submitted details as an object. The doubt I have is how can I prevent the form from submitting when fields are empty? I want to check whether all the functions above validate() is true or not and then execute the validate function if not true, prevent the form from submitting. The errors that are shown stays there in the form even after submission. I have tried to refresh the window using window.location.reload() but then the object I want is lost by this method. Is there any way I can achieve this?


x = "correct"


function nameValidate(value) {
    namev = value;
    if (namev.length <= 3) {
        
        var nameError = "Enter a valid name"
        document.getElementById("nameerror").innerHTML = nameError
        //return 1;
    } else {
        document.getElementById("nameerror").innerHTML = x
        //return 0;
    }

}

function emailValidate(value) {
    emailv = value;
    if (emailv.length < 5) {
        var emailError = "Enter a valid email"
        document.getElementById("emailerror").innerHTML = emailError
        //return 1;
    } else {
        document.getElementById("emailerror").innerHTML = x
        //return 0;
    }

}

function companyValidate(value) {

    if (value === "") {
        var companyError = "Enter a valid company";
        document.getElementById("companyerror").innerHTML = companyError;
        //return 1;
    } else {
        document.getElementById("companyerror").innerHTML = x;
        //return 0;
    }

}

function phoneValidate(value) {
    phonev = value;
    if ( phonev.length !== 10 ) {
        var phoneError = "Enter a valid 10 digit phone number";
        document.getElementById("phoneerror").innerHTML = phoneError;
        //return 1;
    } else {
        document.getElementById("phoneerror").innerHTML = x;
        //return 0;
    }

}

function validate(e) {

    /* Variables for field values and form */
    var name=document.getElementById("name").value;
    var email=document.getElementById("email").value;
    var company=document.getElementById("company").value;
    var phone=document.getElementById("phone").value;
    var desc=document.getElementById("description").value;
    var project=document.getElementById("project").value;
    var form = document.getElementById("form");
    
    //e.preventDefault();   
    console.log({name,email,company,phone,desc,project});
    form.reset();
 }

 //form.addEventListener("submit",validate(),true);

Use `e.preventDefault()` to prevent the form from submitting. — Barmar, Nov 02 '21 at 05:09
If you change ```//e.preventDefault();``` in your code to ```e.preventDefault();``` it should stop the refresh. To prevent the form from submitting with any empty inputs, you can simply add ```required``` to the ```input``` tag in your HTML, like `````` — Carlton Lindsay, Nov 02 '21 at 05:12
how can I write the function `validate(e)` to prevent this since I want to check the above functions return true or not? — Gaius G D'cruz, Nov 02 '21 at 05:14

Form object in the console gets deleted on submit

0 Answers0