CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Harish
Harish

Reputation: 60

HTML Form onsubmit not executing the external function

I have a HTML Form and on submit, a validate() function to be called.

The submit works fine, if the validate() function is within the "script" tag at the end of the "body" tag.

Otherwise, the submit doesn't call the validate() function when it is present in external js file, even though document.ready is used, as in https://jsfiddle.net/vg47127o/1/

HTML -- 

<form method="post" action="#" onsubmit="return validate()" name="loginForm" class="form-horizontal" role="form">

<div class="form-group">
<p class="error-block"><span class="glyphicon glyphicon-exclamation-sign"> </span> <span class="error-msg"></span></p>
 </div>

<div class="form-group">
<label class="control-label col-sm-3" for="username">username:
</label>

<div class="col-sm-9">
  <input type="text" class="form-control digits-only" id="username" placeholder="Enter Username">
</div>
</div>

<div class="form-group">
<label class="control-label col-sm-3" for="password">Password:</label>
<div class="col-sm-9">
  <input type="password" class="form-control" id="password" placeholder="Enter Password">
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
  <button type="submit" id="loginBtn" class="btn btn-default">Log In</button>
  <button type="reset" class="btn btn-default">Reset</button>
</div>
</div>
</form>

SCRIPT -- 

    $(document).ready(function() {

  var displayError = function(error, msg) {
    $(".error-block .error-msg").text(msg);
    if (error === true)
      $(".error-block").show();
    else
      $(".error-block").hide();
    return true;
  };

  //Validating the input fields    
  var validate = function() {
    var $username = $("#username").val(),
      $password = $("#password").val();

    if ($username === '' || $password === '') {
      displayError(true, ' Username or Password cannot be empty. ');
      return false;
    } else if ($username.length < 6 || $password.length < 6) {
      displayError(true, ' Username and Password should be a minimum of 6 characters. ');
      return false;
    } else {
      displayError(false, ' ');
      return true;
    }
  };
});

Am I missing out something here or What could be the reason for this.

Upvotes: 1

Views: 622

Answers (2)

metarmask
metarmask

Reputation: 1857

The validate variable is scoped to the anonymous function you put into $(document).ready. That means it can be accessed only from within that function and not from the page which lives in the global scope.

Add the event listener using the $(...).submit function instead:

$(document).ready(function() {

    /* *** */

    //Validating the input fields    
    $("[name=loginForm]").submit(function() {
        var $username = $("#username").val(),
            $password = $("#password").val();

        /* *** */

    });
});

Upvotes: 1

mhodges
mhodges

Reputation: 11116

Here's an updated fiddle that is working. You need to trap the submit() event if validate does not return true.

This is what you would include in your jQuery:

$("form").on("submit", function (event) {
    if (!validate()) {
        event.preventDefault();
    }
});

Then your <form> tag would simply be <form method="post" action="#" name="loginForm" class="form-horizontal" role="form">

FYI

The reason for this is that when your validate() function is inside of your document ready, it is scoped to the document ready function, therefore, inline DOM event triggers do not have access to it. You have to set up the event handler inside the jQuery function, or declare your validate() function outside of your document ready function.

Upvotes: 1

Related Questions