form is submitting instead return false javascript

Question

I am trying to test my form for validation. I don't have an .asp or .php file so I was informed I could use action="". My code doesn't seem to function right.On codepen it shows as values being posted. Jsfiddle gives me an error thats a paragraph long. In browser the page just seems to refresh. I have no alerts showing for anything....

what am I doing wrong here?

HTML:

<form name="name_form" action="" onsubmit="ValidateFormJS()" method="post">
    First Name:
    <input type="text" name="first_name">
    <br> Last Name:
    <input type="text" name="last_name">
    <br>
    <input type="submit" value="Submit">
</form>

Javascript:

function ValidateFormJS() {
    var first = document.forms["name_form"]["first_name"].value;
    var last = document.form["name_form"]["last_name"].value;

    if (first == null || first == "") {
        alert("First name must be filled out.");
        return false;
    } else if (last == null || last == "") {
        alert("Last name must be filled out.");
        return false;
    } else {
        alert("Form Submitted.");
        return true;
    }
}

Tushar · Accepted Answer · 2015-09-11 05:26:40Z

3

The returned values from the function are never used. You forgot return before the function call on onsubmit event.

onsubmit="return ValidateFormJS()"

Another problem is that you're using document.form to get the value of last name. It should be document.forms.

The last else can be removed.

Demo

var form = document.forms["name_form"];

function ValidateFormJS() {
  var first = form["first_name"].value,
    last = form["last_name"].value;

  if (first == null || first == "") {
    alert("First name must be filled out.");
    return false;
  } else if (last == null || last == "") {
    alert("Last name must be filled out.");
    return false;
  }
}

<form name="name_form" action="" onsubmit="return ValidateFormJS()" method="post">
  First Name:
  <input type="text" name="first_name">
  <br>Last Name:
  <input type="text" name="last_name">
  <br>
  <input type="submit" value="Submit">
</form>

edited Sep 11, 2015 at 5:26

answered Sep 11, 2015 at 5:21

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

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

Comments

Rohit Gaikwad · Accepted Answer · 2015-09-11 05:51:26Z

0

try this

in view

<form name="name_form" action="" onsubmit="return ValidateFormJS();" method="post">

in js code

function ValidateFormJS() {
    var first = document.forms["name_form"]["first_name"].value;
    var last = document.form["name_form"]["last_name"].value;

    if (first == null || first == "") {
        alert("First name must be filled out.");
        return false;
    } else if (last == null || last == "") {
        alert("Last name must be filled out.");
        return false;
    }

    alert("Form Submitted.");
    return true;
}

answered Sep 11, 2015 at 5:51

Rohit Gaikwad

8152 gold badges8 silver badges24 bronze badges

Collectives™ on Stack Overflow

form is submitting instead return false javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related