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

Question

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>

@WillD Thanks for picking up on that, simple mistakes are my speciality. Although I'm still proceeding to have the same issue. — Danie, Apr 17 '20 at 02:38

score 1 · Answer 1 · answered Apr 17 '20 at 02:58

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>

Thank you, this helped! Although if I still had your attention, I'd like to also ask how I would go about validating only certain characters? I've stumbled across some answers online that involve an expression similar to "^[a-zA-Z]", although I'd also like to allow the characters " " and "-" through too, I'm just not sure how to implement this into my code. — Danie, Apr 17 '20 at 03:46
So you are looking for "regular expressions" aka "regex" or "regexp" I would recommend https://regexr.com/ as a tool to learn / experiment — WillD, Apr 17 '20 at 04:12
Once you have the regex you want, check out: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match — WillD, Apr 17 '20 at 04:13

score 0 · Answer 2 · 2020-04-17T02:52:54.147

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.

Thank you very much for your help! Currently I'm completing a question that specifically asks us to use Javascript to validate, unfortunately. But nonetheless, the changes you've made to the code have helped and I recognise where I've gone wrong. I've quite literally started javascript today and my bad study habits seem to be catching up to me. But thank you! This has helped a lot. — Danie, Apr 17 '20 at 02:47
If I was still able to keep your attention, I'd like to also ask how I would go about validating only certain characters? I've stumbled across some answers online that involve an expression similar to "^[a-zA-Z]", although I'd also like to allow the characters " " and "-" through too, I'm just not sure how to implement this into my code — Danie, Apr 17 '20 at 04:02
Hello Daniel - that's a regex question generally. So do a search on regex. ^ means 'from start of string'. [a-zA-Z] means match any alpha, small or large. Add those other two [a-zA-Z -] if you please. JavaScript's .match() method will be a good start (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match). And if you are happy with my answer, accepting it would be a nice thing. — , Apr 17 '20 at 11:33

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

2 Answers2