input validation in polymer paper-input using validate.js

Question

I have polymer login form and i want to validate it on button click. have also set my rules for field but getting error

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

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

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

But getting console error:

TypeError: form.validate is not a function

can anyone suggest what am i doing wrong?

Answer 1

TypeError: form.validate is not a function

Usually this means you have not properly included the plugin. Carefully check your file includes. You cannot call .validate() until some time AFTER you've included the jQuery Validate plugin.

I'm also curious why you're using such old versions of jQuery and jQuery Validate? jQuery v1.4.4 and jQuery Validate 1.7 are roughly 6 years old.

The other issue is that you've put .validate() inside a function that you're triggering inline. The .validate() method is NOT the testing method. The .validate() method IS the INITIALIZATION method. This means that it's only called ONCE on page load (DOM ready event) and the validation is then triggered automatically based on user events such as click , blur , keyup , etc.

Not sure what this.$.form_login is supposed to represent (it's not a jQuery object), but you'll need to attach .validate() to a proper jQuery selector (or a variable that represents one) such as $('#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

Please review the Tag Wiki page and the official documentation for proper initialization and usage.

Answer 2

It happens because this.$.form_login does not return jQuery object. Use something like this:

$(form).validate(...)