JavaScript: Function not running

I'm currently learning JavaScript and trying to validate a simple form.

I'm using the revealing module pattern and using a for loop to check if input fields are empty on form submit.

The problem is that the validate function isn't firing and I see no errors in the console.

Also, If my JS can be improved please do let me know.

JSFiddle

http://jsfiddle.net/n4TvL/

HTML

<form action="" method="post" name="frm" id="form">
 <input id="fullname" placeholder="Name" name="input">
 <input id="email" placeholder="Email" name="input">
 <input type="submit" id="submit">
</form>

JS

"use strict";
var signUp = (function() {
 var formSubmit = function() {
 var inputField = document.getElementsByTagName('input');
 document.forms['frm'].onsubmit = function(e) {
 alert('ello');
 val();
 e.preventDefault();
 }
 };
 function val() {
 var check = document.getElementsByName('input');
 var len = check.length;
 for(var i = 0; i < len; i++) {
 if(check[i].length === "") {
 alert('empty');
 }
 }
 };
 return {
 init: formSubmit
 }
})();
signUp.init();

• 1
  your val() function actually is running. If you insert an alert(len) after var len = check.length; it will alert 2. The problem is with if(check[i].length === "") {alert('empty');} ... your condition is to check if check[i].length is an empty string. and then alert('empty'), but since this never happens, the alert never happens. You want to do check[i].value not check[i].length

  Gary Schreiner

  – Gary Schreiner

  2014年05月09日 00:41:32 +00:00

  Commented May 9, 2014 at 0:41
• Also, you may want to look at document.getElementById to replace your use of document.forms[name] (and possibly document.getElementsByName('input'), so that you can distinguish them)). Element IDs work everywhere, form names have had some issues with older IE versions and were deprecated in HTML 4.

  Greg

  – Greg

  2014年05月09日 00:56:18 +00:00

  Commented May 9, 2014 at 0:56

2 Answers 2