CODEWITHSUNDEEP
javascripthtmlonsubmit
Danie
Danie

Reputation: 1

My HTML form validator in Javascript doesn't seem to be working

I've written a validator for my HTML although I'm not sure where I'm going wrong.

What I'm trying to do below is determine if there is any text in the "First Name" box altogether. There is underlying css to the code but I believe my issue is surrounding my onsubmit and validate function as nothing in the javascript seems to be running once I click the submit button. 

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
	<title>NewPatientForm</title>
	<link rel="stylesheet" type="text/css" href="NewPatient.css">
	
	<script>
		function validate() {
    var invalid = false;


    if(!document.Firstname.value.length) {
        invalid = true;
    }
	
    if(invalid) {
        document.getElementById("form-error").style.display = "inline-block";
        return false; //to make the text appear
    }
    return true;
}

	</script>
</head>
<body>
  <form id="NewPatientForm" method="post" action="#" onsubmit="return  validate();">
  <div class="form-element">
	<p id="form-error">All fields are required</p>
  </div>
  
  <div>
  <label for="Firstname">First Name
	<input type="text" name="Firstname" placeholder="First Name" id="Firstname">
	</label>
  </div>

  <div>
	<input type="submit" name="submit-button" value="Submit">
  </div>
  </form>
</body>
</html>

Upvotes: 0

Views: 41

Answers (2)

WillD
WillD

Reputation: 6512

Looks like the culprit was your attempt to access Firstname on the document object.

I replaced it with the more standard document.getElementById() method and its working.

Some reading on this: Do DOM tree elements with ids become global variables?

function validate() {
  var invalid = false;

  if(!document.getElementById('Firstname').value.length) {
      invalid = true;
  }

  if(invalid) {
      document.getElementById("form-error").style.display = "inline-block";
      return false;
  }
  return true;
}
#form-error {
  display: none;
}
<form id="NewPatientForm" method="post" action="#" onsubmit="return validate()">
  <div class="form-element">
	  <p id="form-error">All fields are required</p>
  </div>
  
  <div>
    <label for="Firstname">First Name
    <input type="text" name="Firstname" placeholder="First Name" id="Firstname">
    </label>
  </div>

  <div>
	  <input type="submit" name="submit-button" value="Submit">
  </div>
</form>

Upvotes: 1

user10987633
user10987633

Reputation:

There are a couple of typos, and I'll suggest something else as well. First, a fix or three in the code:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>NewPatientForm</title>

  <script>
    function validate() {
      const invalid = document.getElementById("Firstname").value.length == 0;
      if(invalid) {
        document.getElementById("form-error").style.display = "inline-block";
        return false; //to make the text appear
      }
      return true;
    }

  </script>
</head>
<body>
<form id="NewPatientForm" method="post" action="#" onsubmit="return validate();">
    <div class="form-element">
        <p id="form-error">All fields are required</p>
    </div>

    <div>
        <label for="Firstname">First Name
            <input type="text" name="Firstname" placeholder="First Name" id="Firstname">
        </label>
    </div>

    <div>
        <input type="submit" name="submit-button" value="Submit">
    </div>
</form>
</body>
</html>

My suggestion is that you also look into built-in HTML form validation attributes. I'm thinking you're reinventing the wheel for things like requiring a non-empty Firstname. Why not this instead of JavaScript?

<input type="text" name="Firstname" id="Firstname" placeholder="First Name" required />

And many others, like minlength="", min="", step="", etc.

Plus there's still a JavaScript hook into the validation system with .checkValidity() so you can let the built-in validation do the heavy lifting, and then throw in more of your own custom aspects too.

Upvotes: 0

Related Questions