Problems with validate jquery function

Question

I was trying to make a validation in my form with jquery, but it does not work the way it was supposed to and I have no idea why.

I have this function to make the validation:

function newLogin () {
var username = $("#popup-login-email").val();
var password = $("#popup-login-password").val();
if (username == "" || password.length<5){

  $(document).ready(function () {

      $("#popup-login-form").validate({ // initialize the plugin

          rules: {
              email: {
                  required: true,
                  email: true
              },
              password: {
                  required: true,
                  minlength: 5
              }
          },

      });

  });

  return false;
}
else{
  Parse.User.logIn(username, password, {

  success:function(user){
        console.log("login successfull");
        if(checkEmail()){
          console.log(checkEmail());
          document.location.href = "Temas.html";
        }
  },
    error: function(user, error){
        console.log(error.message);
        displayErrorDiv();
    }
  })
}

}

And i got this form

<form id = "popup-login-form">
                <input type="email" name="email" placeholder="Email" id = "popup-login-email" class="popup-input first"/>
                <div id="error-message-email" class="error">

                </div>
                <input type="password" name="password" placeholder = "Password" id="popup-login-password" class="popup-input"/>
                <div id="error-message-password" class="error">

                </div>
                <button class="popup-button" id="popup-cancel">Cancel</button>
                <button type="submit" class="popup-button" id="popup-submit">Login</button>
                <div class="error-message-login" class="error">

                </div>
            </form>

And the weird part is that just does not work in my page. Here it works, for example: http://jsfiddle.net/xs5vrrso/

Please check your console might be giving any jquery errors. — Dilip Oganiya
– Dilip Oganiya, Commented Dec 1, 2015 at 12:49
wrap all your code with $(document).ready(function () {}), not only validate. — KoIIIeY
– KoIIIeY, Commented Dec 1, 2015 at 12:49

Sandeep J Patel · Accepted Answer · 2015-12-01 13:20:08Z

3

There is no problem with the code which you shared in jsfiddle but the above code you are using $(document).ready({function()}) inside a function which is of no use. Now the problem is that the method newLogin is not called on dom ready and thus this issue occurs.

Better keep the function call inside $(document).ready({function() newLogin() }) . Now you can also use submitHandler in validate to merge the if else conditions.

answered Dec 1, 2015 at 13:20

Sandeep J Patel

95010 silver badges27 bronze badges

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

Comments

RBoschini · Accepted Answer · 2015-12-01 13:23:36Z

i make one example to you

jsfiddler example

$(document).ready(function () {
      $("#popup-login-form").validate({ // initialize the plugin

          rules: {
              email: {
                  required: true,
                  email: true
              },
              password: {
                  required: true,
                  minlength: 5
              }
          },

      });
    //event listening onSubmit
    $('form').submit(function(event){

        var returnForm = true;
        var username = $("#popup-login-email").val();
        var password = $("#popup-login-password").val();

        //Make your validation here
        if (username == "" || password.length<5){
            returnForm = false;
        }

        return returnForm; //Submit if variable is true
    });

});

Sandstorm · Accepted Answer · 2015-12-01 13:12:42Z

0

With jQuery when i get the

"TypeError: $(...).validate is not a function"

I change

$(..).validate

for

jQuery(..).validate

answered Dec 1, 2015 at 13:12

Sandstorm

1445 bronze badges

2 Comments

Victor Oliveira Over a year ago

I tried, but still "TypeError: jQuery(...).validate is not a function."

Sandstorm Over a year ago

I would place $(document).ready(function () { outside newLogin() function.

Atif Tariq · Accepted Answer · 2015-12-01 13:17:53Z

0

You have to include this validate file after jquery file.

<script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script>

answered Dec 1, 2015 at 13:17

Atif Tariq

2,7701 gold badge31 silver badges35 bronze badges

Comments

Varg · Accepted Answer · 2015-12-01 13:25:07Z

0

Do not wrap the code under the if condition with $(document).ready(). Change the code to :

if (username == "" || password.length < 5){
    $("#popup-login-form").validate({ // initialize the plugin
      /*remaining code here*/
    });
}

Also it is a good habit to trim the spaces around any input that you accept from the users. For e.g in your case please do the following:

var username = $.trim($("#popup-login-email").val());
var password = $.trim($("#popup-login-password").val());
/* $.trim() would remove the whitespace from the beginning and end of a string.*/

answered Dec 1, 2015 at 13:25

Varg

564 bronze badges

Collectives™ on Stack Overflow

Problems with validate jquery function

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related