Event not getting called from submit button Javascript

Question

I am new to javascript. I am trying to figure out why my javascript function is not being called. I am trying to add nameVlidation for name field and other validation for each text input. But my name validation itself is not working.

Javascript call (formValidation.js)

'use strict';

var nameValidation = formValidation().nameValidation();

document.getElementById('submit').addEventListener('click',nameValidation);

var formValidation = function () {

return {
    nameValidation: function() {

        this.name = document.forms["contact"]["name"].value;

        if(this.name=="") {
            alert("Enter name, required");
            return false;
        }else if(this.name==[0-9]) {
            alert("Only alphabets");
        }

        return true;
    },

    addressValidation: function() {

    }
  }
};

Html

    <form name="contact" action="#" method="post" enctype="text/plain">
<input type="text" name="name" placeholder="NAME"></br>
<input type="text" name="email" placeholder="EMAIL" required></br>
<input type="text" name="phoneNumber" placeholder="PHONE-NUMBER"></br> 
 <input type="text-box" name="message" placeholder="MESSAGE"></br>
<button id="submit" class="btn btn-primary" type="submit"><i class="fa fa-paper-plane">Submit</i></button></br>
  </form>
<script src="js/formValidation/formValidation.js"></script>

I am not sure what is wrong with it.

Hameed Syed · Accepted Answer · 2017-08-22 05:13:50Z

1

     'use strict';
//Rest of your code goes here
        document.getElementById('submit').addEventListener('click',nameValidation);

Because of function hoisting in Javscript.By default, JavaScript moves all the function declarations to the top of the current scope. This is called function hoisting. This is the reason your nameValidation function is not called in your current code.

answered Aug 22, 2017 at 5:13

Hameed Syed

4,3532 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sahan Serasinghe · Accepted Answer · 2017-08-22 05:31:04Z

0

The problem you are facing is due to a concept in Javascript called, Hoisting

You need to declare formValidation at the top before calling it from anywhere else, as you are using the function expression form

'use strict';

var formValidation = function () {

return {
    nameValidation: function() {

        this.name = document.forms["contact"]["name"].value;

        if(this.name=="") {
            alert("Enter name, required");
            return false;
        }else if(this.name==[0-9]) {
            alert("Only alphabets");
        }

        return true;
    },

    addressValidation: function() {

    }
  }
};

var nameValidation = formValidation().nameValidation();

document.getElementById('submit').addEventListener('click',nameValidation);

PS - JSBin Demo

edited Aug 22, 2017 at 5:31

answered Aug 22, 2017 at 5:17

Sahan Serasinghe

1,67121 silver badges33 bronze badges

2 Comments

LifeStartsAtHelloWorld Over a year ago

Thanks for the links. I understood why it did not work for function expression. :)

Sahan Serasinghe Over a year ago

@user3369719 Glad it helped you :) forgot to add the demo link.. Added that to the answer as well

Collectives™ on Stack Overflow

Event not getting called from submit button Javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related