驗證jQuery函數的問題

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()})中使用$(document).ready({function()}) 。 現在的問題是在dom就緒時未調用方法newLogin，因此會發生此問題。

最好將函數調用保留在$(document).ready({function() newLogin() }) 。 現在，您還可以在validate中使用submitHandler合並if else條件。

Answer 2

使用jQuery時，我得到了

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

我改變

$（..）。validate

對於

jQuery（..）。驗證

Answer 3

您必須在jquery文件之后包括此驗證文件。

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

Answer 4

我給你一個例子

jsfiddler示例

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