0

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();
Improve this question
2
  • 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 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. Commented May 9, 2014 at 0:56

2 Answers 2

Reset to default
3

val is firing, which you can see if you put an alert in at the beginning.

Instead of 

check[i].length

you should have 

check[i].value
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Actually .innerHTML.length < 1 would be better than value
Why? value is specifically for reading the value of a field, innerHTML is a general way to access the contents of an element. An input field with a value filled in still won’t have anything in innerHTML.
Would also like to know why innerHTML? .value makes more sense to me.
(Which you can verify on your own Fiddle by filling in the fields and still getting the empty alert)
-1

Actually your val() function is being called, your problem is with

EDIT: .length should .innerHTML.length < 1

See: http://jsfiddle.net/n4TvL/4/

         if(check[i].innerHTML.length < 1) {

            alert('empty');
        }
Improve this answer

2 Comments

the problem is that he's checking if the length of the check[i] input is an empty string.. it should be either length === 0 or value === "" ...
As I said in a comment above, the innerHTML of a filled-in input field will still be of length 0. Your fiddle still gives the empty alert when the fields are filled in.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.