CODEWITHSUNDEEP
javascriptjquery
Victor Oliveira
Victor Oliveira

Reputation: 1129

Problems with validate jquery function

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/

Upvotes: 0

Views: 80

Answers (5)

Varg
Varg

Reputation: 56

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.*/

Upvotes: 0

RBoschini
RBoschini

Reputation: 506

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
    });

});

Upvotes: 0

Sandeep J Patel
Sandeep J Patel

Reputation: 940

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.

Upvotes: 3

Atif Tariq
Atif Tariq

Reputation: 2772

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>

Upvotes: 0

Sandstorm
Sandstorm

Reputation: 144

With jQuery when i get the

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

I change

$(..).validate

for

jQuery(..).validate

Upvotes: 0

Related Questions