Javascript can't get form to validate

Question

I'm having problems getting my form to validate with Javascript. I've tried a bunch of different things, but I just can't get it to work. It's possible I'm missing something completely basic, I am pretty new at this. Please let me know what I could possibly change.

<!DOCTYPE html>

<html lang = "en">
<head>
 <title>  </title>
 <meta charset = "utf-8" />
 
</head>
<body>
 <script lang = "text/javascript">
 
 document.getElementById("myForm").onsubmit = validateForm();
 
 function zipcheck(sZip)
 {
  var postalRegex = /^d{5}(-\d{4})?$/;
  return postalRegex.test(sZip);
 }
 function validateForm()
 {
  if (zipcheck(document.getElementById("zip"))
   return true;
  else
  {
   alert(document.getElementById("zip") + " is not a valid zip code");
   return false;
  }
 }
 </script>
 <form id = "myForm" action = "" >
 <p>
 
 <label> Zip Code
  <input type = "text" id = "zip" />
 </label>
 
 <input type = "submit" name = "submit" />
 
 </p>
 </form>
 
</body>
</html>

winner_joiner · Accepted Answer · 2017-03-01T18:50:22.887

1

The Problem your are, checking the HTML Element not the Value. It should be document.getElementById("zip").value

    document.getElementById("myForm").onsubmit = validateForm;
 
 function zipcheck(sZip)
 {
  var postalRegex = /^d{5}(-\d{4})?$/;
  return postalRegex.test(sZip);
 }
  
 function validateForm()
 {
  if (zipcheck(document.getElementById("zip").value)){
   return true;
  }else
  {
   alert(document.getElementById("zip").value + " is not a valid zip code");
   return false;
  }
 }

<!DOCTYPE html>
<html lang = "en">
<head>
 <title>  </title>
 <meta charset = "utf-8" />
</head>
<body>
 <form id = "myForm" action="/test" method="get" >
 <p>
 <label> Zip Code
  <input type = "text" id = "zip"  />
 </label>
 <input type = "submit" name = "submit" />
 </p>
 </form>
</body>
</html>

here is a working sample on jsfiddler https://jsfiddle.net/u9suy516/

Optional Information: when using addEventListener you would also have to use the preventDefault() function on the passed event Parameter, but not need the return statments.

 function validateForm(event)
 {
    if (!zipcheck(document.getElementById("zip").value)) {
        alert(document.getElementById("zip").value + " is not a valid zip code");
        event.preventDefault();
    }
 }

edited Mar 01 '17 at 18:50

answered Mar 01 '17 at 18:26

winner_joiner

12,173
4
36
61

Thank you for the quick response! I made these changes to the code, but it still doesn't validate the form. – NerevarineKing Mar 01 '17 at 18:32
add i edited the answer, some other parts wheren't correct – winner_joiner Mar 01 '17 at 18:34
`document.getElementById("myForm").onsubmit = validateForm();` should be `document.getElementById("myForm").onsubmit = validateForm;` or `document.getElementById("myForm").addEventListener("submit",validateForm)` – winner_joiner Mar 01 '17 at 18:35
You also need to attach the event listener after the page has loaded. Either by putting the script at the foot of your html or use one of the document ready methods here: http://stackoverflow.com/questions/2304941/what-is-the-non-jquery-equivalent-of-document-ready – scrappedcola Mar 01 '17 at 18:36
@NerevarineKing I added a link to jsfiddler here the sample should work – winner_joiner Mar 01 '17 at 18:40
Thank you so much! This worked excatly how I needed it to work. – NerevarineKing Mar 01 '17 at 18:46
@ scrappedcola you are absolutly correct. since I always split up, the code I didn't notice. :-) – winner_joiner Mar 01 '17 at 18:51
Actually, even if a correct zip code is entered, it says that it's incorrect. – NerevarineKing Mar 01 '17 at 19:06
1

check the regex I think it should be `/^\d{5}(-\d{4})?$/` not `/^d{5}(-\d{4})?$/` – winner_joiner Mar 01 '17 at 19:12

Javascript can't get form to validate

1 Answers1