验证jQuery函数的问题

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/

Answer 1

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.

Answer 2

With jQuery when i get the

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

I change

$(..).validate

for

jQuery(..).validate

Answer 3

您必须在jquery文件之后包括此验证文件。

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

Answer 4

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

});

Answer 5

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