Question

我试图用jquery在我的表单中进行验证，但它不能按预期的方式工作，我不知道为什么。

我有这个功能来进行验证：

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

}

我得到了这个表格

<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>

奇怪的是，我的页面无效。这有效，例如：http://jsfiddle.net/xs5vrrso/

Answer 1

您在jsfiddle中共享的代码没有问题，但上面的代码在函数中使用$(document).ready({function()})是没有用的。现在的问题是，在dom就绪时没有调用newLogin方法，因此出现了这个问题。

最好在$(document).ready({function() newLogin() })内保留函数调用。现在，您还可以在validate中使用submitHandler来合并if else条件。

Answer 2

当我得到

时使用jQuery

“TypeError：$（...）。validate不是函数”

我改变了

$（..）。验证

代表

的jQuery（..）。验证

Answer 3

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

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

Answer 4

我向你举了一个例子

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

请勿使用if将代码包装在$(document).ready()条件下。将代码更改为：

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

修剪用户接受的任何输入周围的空间也是一个好习惯。例如，在您的情况下，请执行以下操作：

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

验证jquery函数的问题

5 个答案: