Javascript validation for html form not working

Question

I'm trying to make a working javascript validator for an HTML form for an assessment, I have gotten the lecturer to help me originally, however they could not solve the issue. The validation works until I add another input to validate then it completely stops working. I am new to javascript, i have never worked with it before.

I have tried rebuiling the validator and order form completely multiple times. I have reviewed the code multiple times to no avail.

function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == " ") {
    alert("Name must be filled out");
    return false;
  }
  var y = document.forms["myForm"]["mname"].value;
  if (y == " ") {
    alert("middle name must be filled out");
    return false;
  }
}

<script src="Validator.js"></script>
<form name="myForm" onsubmit="return validateForm()" action="OrderConfirmed.htm" method="post">
  Name: <input type="text" name="fname" value=" "> Middle Name: <input type="text" name="mname" value=" ">
  <input type="submit" value="Submit">
</form>

The expected result is that when the form is submitted but a field is empty a message (dialog box) should be displayed telling the user which input is not filled in.

The code you've posted works fine (though you should compare to an empty string "") - can you please post the code that fails? — obscure
– obscure, Commented Jun 15, 2019 at 14:42
That's odd because whenever i attempt to submit the form it fails to validate and lets through empty results — Jamanator666
– Jamanator666, Commented Jun 15, 2019 at 14:45
This is likely something to do with posting to action="OrderConfirmed.htm" but we really cannot clearly tell here. I deleted my answer as it really did not address that. — Mark Schultheiss
– Mark Schultheiss, Commented Jun 15, 2019 at 14:51

kodvin · Accepted Answer · 2019-06-15 15:32:18Z

1

You could solve it by using 'event.preventDefault'. (But your code should work too...) Here is example code:

<html>
<head>
    </head>
    <body>
	<form name="myForm" onsubmit="validateForm(event)">
	    Name: <input type="text" name="fname" value=" ">
	    Middle Name: <input type="text" name="mname" value=" ">
	    <input type="submit" value="Submit">
	</form>
	<script type="text/javascript">
	    function validateForm(e) {
                var x = document.forms["myForm"]["fname"].value;
                if (x == " ") {
                    e.preventDefault();
                    alert("Name must be filled out");
                    return false;
                }
                var y = document.forms["myForm"]["mname"].value;
                if (y == " ") {
                    e.preventDefault();
                    alert("middle name must be filled out");
                    return false;
                }
            }
        </script>
     </body>
</html>

edited Jun 15, 2019 at 15:32

answered Jun 15, 2019 at 15:15

kodvin

1,2769 silver badges14 bronze badges

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

1 Comment

kodvin Over a year ago

No worries, though your code should work. Maybe there is something with including your script.

Collectives™ on Stack Overflow

Javascript validation for html form not working

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related