使用validate.js在聚合物紙輸入中進行輸入驗證

Question

我有聚合物登錄表單，我想在單擊按鈕時對其進行驗證。 也為野外設定了我的規則，但出現錯誤

         <form id="form_login"> 
      <paper-toast id="toastError" text=""></paper-toast>               
                    <div horizontal layout end>
                        <core-icon icon="social:person" style="margin: 0 10px 10px 0;"></core-icon>
                        <paper-input-decorator floatingLabel label="Username" flex class="user-input" name="username">
                            <input type="text" required>
                        </paper-input-decorator>
                    </div>
                    <div horizontal layout end>
                        <core-icon icon="https" style="margin: 0 10px 10px 0;"></core-icon>
                        <paper-input-decorator floatingLabel label="Password" flex class="user-input" name="password">
                            <input type="password" required>
                        </paper-input-decorator>
                    </div>
                    <div class="col-md-8">
                        <paper-checkbox label="Keep me signed in"></paper-checkbox>
                    </div>                      
                    <div class="col-md-4">
                        <paper-button raised on-tap="{{runLoginValidator}}"><core-icon icon="forward"></core-icon>Login</paper-button>
                    </div>
                    <br>
                    <div class="col-md-12">
                        <p class="register">Don't have an account yet? <paper-button raised on-tap={{box_register_show}}><core-icon icon="add"></core-icon>Create an account</paper-button></p>
                    </div>
                </form>

和javascript：

 runLoginValidator: function () {
            var form = this.$.form_login;
            var errorHandler = this.$.toastError;
            form.validate({
                rules: {
                    username: {
                        minlength: 4,
                        required: true
                    },
                    password: {
                        minlength: 6,
                        required: true
                    }
                },
                submitHandler: function (form) {
                    errorHandler.hide();
                    form.submit();
                },
                invalidHandler: function (event, validator) { 
                    errorHandler.show();
                    errorHandler.text = "you have some error";
                }
            });

兩個jquery lib：

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

但是出現控制台錯誤：

TypeError: form.validate is not a function

有人可以建議我做錯了什么嗎？

Answer 1

TypeError：form.validate不是一個函數

通常，這意味着您沒有正確包含該插件。 仔細檢查您的文件包括。 在包含jQuery Validate插件之后的一段時間之后，您才能調用.validate() 。

我也很好奇為什么使用了舊版本的jQuery和jQuery Validate？ jQuery v1.4.4和jQuery Validate 1.7大約有6年的歷史了。

另一個問題是，您已將.validate()放入要觸發內聯的函數中。 .validate()方法不是測試方法。 .validate()方法是 INITIALIZATION方法。 這意味着它僅在頁面加載時稱為ONCE（DOM就緒事件），然后根據用戶事件（例如click ， blur ， keyup等） 自動觸發驗證。

不知道this.$.form_login應該代表什么（它不是jQuery對象），但是您需要將.validate()附加到適當的jQuery選擇器（或代表一個的變量），例如$('#form_login') 。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {   // <- DOM Ready event

        $('#form_login').validate({   // <- Initialize plugin
            ....                      // <- Rules & Options

請查看Tag Wiki頁面和官方文檔以進行正確的初始化和使用。

Answer 2

發生這種情況是因為this。$。form_login不返回jQuery對象。 使用這樣的東西：

$(form).validate(...)