JQuery Validator turn OFF tooltips on all form fie

Question

This one is strange. So i've implemented the jQuery Validation on a site where I am using both Backbone.js and jQuery Mobile. On one form the validation works pretty much like the default where you see red text under the input fields (i had to change the placement so the text was not inside the field).

On another page for some reason the error messages don't show up the same way. They show up looking like a tooltip.

I've seen many posts on here for how to make the validation use Tooltips, however that is not what i want. I just want the standard plain-old red text.

If someone could take a look at this i would appreciate it. Here is a demo site where you can see the problem

http://demo.velexo.com/m2/

on that page if you navigate to the signup page and just click submit without filling in anything you will see how i want things to look. then go back to the login page and log in with these credentials (don't worry it's a demo site)

username: public

password: 99382lVAB8

on this page, click on Insurance Information, and then click submit. it will show the tooltip on the first input field.

---

Ok.. sorry guys i thought it would be best to have a live example but you are right, (i'll do it right next time). here is the relevant code:

First, there is a function which sets up my backbone router, at the end of that function i put this:

jQuery.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.appendTo(element.parent().parent().after());
    }
});

Then the standard backbone routing takes over until you click the register page link. here is a stripped down version of the registerApp page which should show only what is relevant:

var registerApp = function() {
    var app = {};

    app.Register = Backbone.Model.extend({
        url: api_url + '/m2/api/register',
    });

    app.RegisterMainView = Backbone.View.extend({
        template: _.template($('#register-main-template').html()),
        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        }
    });

    app.AppView = Backbone.View.extend({
        el: '#registerapp',
        initialize: function () {
            var register = new app.Register(regSteps);
            var view = new app.RegisterMainView({model:register});

            $('#main-content').append(view.render().el);
            $('#main-content').trigger('create');
            //$('#insurance-form').validate();

            jQuery.validator.setDefaults({
                errorPlacement: function(error, element) {
                    error.appendTo(element.parent());
                }
            });


            $('#insurance-form').validate({
                rules: {
                    policy_provider: { required: true },
                    policy_number: { required: true },
                    start_date: { required: true },
                    end_date: { required: true }
                }
            });

        },
        events: {
            'submit': 'onFormSubmit',
        },
        onFormSubmit: function(e) {
            e.preventDefault();
            console.log('submit form');
        }

    }); 

    app.appView = new app.AppView();
}

and lastly, these are the templates that are used:

<script type="text/template" id="register">
    <div id="registerapp">
        <div data-role="header">
            <h2 id="logo">&nbsp;</h2>
        </div>
        <div class="ui-content" id="main-content">
        </div>
        <div data-role="footer" class="footerapp">
        </div>
    </div>
</script>

<script type="text/template" id="register-main-template">
    <form action='/m2/api/register/' method='post' id='register-main' class="ui-mobile">
        <div class="ui-body ui-body-a ui-corner-all col">
            <div>
                <div data-role="collapsibleset" id="registration-steps">
                    <div data-role="collapsible" id="insurance">
                        <h3><span>Insurance Information</span><img src="images/<%- ins_icon %>"/></h3>
                        <form action="#" id="payment-forms" id="insurance-form">
                            <span>We just need some basic information about your insurance</span>
                            <div><input name="policy_provider" id="policy_provider" type="text" placeholder="Policy Provider" required/></div>
                            <div><input name="policy_number" id="policy_number" type="text" placeholder="Policy Number" required/></div>
                            <div><input name="start_date" type="text" placeholder="Start Date" required/></div>
                            <div><input name="end_date" type="text" placeholder="End Date" required/></div>
                            <button name="submit_insurance" id="submit_insurance" type="submit" class="ui-btn">Submit Insurance Info</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </form>
</script>

And in the process of cleaning this up for post here i realize i'm doing some pretty dumb things. like having a form within a form, pretty sure that's a bad idea.

Answer 1

The tooltip is NOT coming from jQuery Validate... it's the browser's built-in HTML5 validation. In other words, you did not properly initialize the jQuery Validate plugin, so since your markup contains the HTML5 validation attribute, required, it will fallback to this. (NOTE: since you declared all validation rules within the .validate() method, you do not need to use any HTML5 validation attributes.)

However, the critical issue...

You have two different id attributes on the same <form> element...

<form action="#" id="payment-forms" id="insurance-form">

Behavior will be unpredictable, however it's likely the second id attribute will be ignored, which is the same id you've attached to .validate(), the initialization method.

$('#insurance-form').validate({ ....