Javascript form validation not working for 2 input fields

Question

I am trying to validate my form using javascript. I want that if a user leaves an input field empty then he will see an alert and the form will not submit data to php file. Unfortunatlly, the code below is not working for me. javascript is not executing on form submit.

javascript

 <script>
 function MyForm() {
 var x =document.forms["myForm"]["name"].value;
  if (x == null || x == "")     {alert("Name must be filled out");
    return false;
   }
  { var y=document.forms["myForm"]["age"].value;
 if (y == null || y == "") {
    alert("age must be filled out");
    return false;
  }
 }

form

 <form name="myForm"action="game.php"onsubmit="return myForm()"method="post">



  Name: <input type="text" name="name">

 Age: <input type="text" name="age">
 <input type="submit" value="Submit">
 </form>

Any help is greatly appriciated.

Chris · Accepted Answer · 2015-05-30 09:03:13Z

2

You've got a couple typos in your code. A good way to find them is to use the console in the developer tools of your browser (try pressing F12).

Change

{ var y=document.forms["myForm"]["age"].value;

to

var y=document.forms["myForm"]["age"].value; //removed the opening curly brace

and in your form change:

onsubmit="return myForm()"

to

onsubmit="return MyForm()"

answered May 30, 2015 at 9:03

Chris

4,4867 gold badges46 silver badges58 bronze badges

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

Comments

AL-zami · Accepted Answer · 2015-05-30 08:38:47Z

1

you have to invoke myForm function first to make it work

  function MyForm() {
 var x =document.forms["myForm"]["name"].value;

  if (x == null || x == "")   
      {alert("Name must be filled out");
    return false;
   }
  var y=document.forms["myForm"]["age"].value;
 if (y == null || y == "") {
    alert("age must be filled out");
    return false;
  }
 }
 MyForm(); // invoke it here

answered May 30, 2015 at 8:38

AL-zami

9,20417 gold badges79 silver badges138 bronze badges

1 Comment

amenthes Over a year ago

the invocation is in the form's onsubmit. There's just a typo in there (first letter is lower case).

Raja Rathinam · Accepted Answer · 2015-05-30 09:28:10Z

1

There are 2 typo issue in your javascript method. Try below method

function MyForm() {
   var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "")     {
         alert("Name must be filled out");
         return false;
    }
    var y=document.forms["myForm"]["age"].value;
    if (y == null || y == "") {
          alert("age must be filled out");
           return false;
     }
 }

answered May 30, 2015 at 9:28

Raja Rathinam

1121 silver badge6 bronze badges

Collectives™ on Stack Overflow

Javascript form validation not working for 2 input fields

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related