HTML Form input invalid then javascript function

Question

I have this html form that has two inputs. I have onsubmit="formValidate()" which should run that function when the user hits submit. I the function is checking if the two inputs have stuff in them or if they're empty. If they're empty it'll change

to say something like "Not complete" if the inputs are empty or "Complete" if they're filled out. I can't get this to work.

    function formValidate(){
        var form = document.forms["Form"]
          ["name"].value;
            if (name == "", email == "") {
                output = "Not Complete";
            }
            else{
                output = "Complete";
            }
            document.getElementById("test").innerHTML = output;
      }

            <form name="Form" onsubmit="formValidate()">
                <label>Name:</label>
                <input type="text" id="name" name="name"><br/>
                <label>Email:</label>
                <input type="text" id="email" name="email"><br/>
                <button type="submit">Submit</button>
                <p id="test"></p>
            </form>

Iłya Bursov · Accepted Answer · 2018-10-16 17:15:09Z

There are multiple small problems:

You're not storing values from input fields into variables to check them
validation function must return value true/false to indicate whether form submission should continue
you need to use || instead of , in comparison

here is fixed example:

    function formValidate(){
        var form = document.forms["Form"]
        var name = form.elements["name"].value;
        var email = form.elements["email"].value;
        var result = false;
            if (name == "" || email == "") {
                output = "Not Complete";
            }
            else{
                output = "Complete";
                result = true;
            }
            document.getElementById("test").innerHTML = output;
            return result;
      }

            <form name="Form" onsubmit="return formValidate();">
                <label>Name:</label>
                <input type="text" id="name" name="name"><br/>
                <label>Email:</label>
                <input type="text" id="email" name="email"><br/>
                <input type="submit" value="Submit"/>
                <p id="test"></p>
            </form>

Dhana · Accepted Answer · 2018-10-16 17:25:48Z

0

Use return false; and add return in onsubmit="return formValidate()"

function formValidate(){
        var form = document.forms["Form"]

            if (form.elements["name"].value  == '' || form.elements["email"].value  == '') 
            {
                output = "Not Complete";
                document.getElementById("test").innerHTML = output;
                return false;
            }
            else{
                output = "Complete";
                return true;
            }


      }

Updated JSFiddle

answered Oct 16, 2018 at 17:25

Dhana

1,6584 gold badges24 silver badges40 bronze badges

Comments

Joe Warner · Accepted Answer · 2018-10-16 17:30:01Z

There was a couple problems one is if (name == "", email == "") the or operator is || not ,

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators

and you never got the email value you just got the name value.

const test = document.getElementById("test");

function formValidate(event) {
  // stops reload on submit
  event.preventDefault();

  setTestText(isFormInvalid() ? "Not Complete" : "Complete");
}

function getNameAndEmail() {
  const form = document.forms["Form"];
  return {name: form.name.value, email: form.email.value};
}

function setTestText(text) {
  test.innerHTML = text;
}

function isFormInvalid() {
  const {name, email} = getNameAndEmail();
  return (name == "" || email == "");
}

<form name="Form" onsubmit="formValidate(event)">
  <label>Name:</label>
  <input type="text" id="name" name="name"><br/>
  <label>Email:</label>
  <input type="text" id="email" name="email"><br/>
  <button type="submit">Submit</button>
  <p id="test"></p>
</form>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

Collectives™ on Stack Overflow

HTML Form input invalid then javascript function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related