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()方法 IS 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 page和official documentation以了解正确的初始化和使用情况。

Answer 2

这是因为。$。form_login不返回jQuery对象。使用这样的东西：

使用validate.js在聚合物纸张输入中输入验证

2 个答案: