Bootstrap Form with jQuery Validation does not work, Throws undefined function error in jQuery

Question

I am stuck with jQuery validation on a Bootstrap page. I have tied my fields on a Bootstrap styled page with the jQuery validator, and I have set the onfocusout to true so that I get instant feedback. But I get a javascript error:

Uncaught TypeError: undefined is not a function jquery.validate.min.js:2
e jquery.validate.min.js:2
(anonymous function) jquery.validate.min.js:2
m.event.dispatch jquery-1.11.1.min.js:3
r.handle jquery-1.11.1.min.js:3
m.event.trigger jquery-1.11.1.min.js:3
m.event.simulate jquery-1.11.1.min.js:3
c jquery-1.11.1.min.js:3

HTML

<div class=container-fluid>
    <form id=withdraw_form class=form-horizontal role=form>
        <div class="wf-section account-details">
            <h4 class=title>Details</h4>
            <div class="form-group">
                <label class="col-xs-5 col-md-4 control-label ">Amount</label>
                <div class="col-xs-4 col-md-5 remove-side-paddings">
                    <input type=text class="form-control" id=amount name=amount />
                </div>
                <div class="col-xs-2 col-md-2 " style="padding-left: 5px;"><span>eg. 99.99</span></div>
            </div>
        </div>

        <div class="wf-section delivery-address">
            <h4 class=title>Contact</h4>
            <div class="form-group">
                <label class="col-xs-5 col-md-4 control-label ">Phone</label>
                <div class="col-xs-4 col-md-5 remove-side-paddings">
                    <input type=text class="form-control" id=phone name=phone />
                </div>
            </div>
        </div>

        <div class="action-area">
            <input type=submit id=withdraw class="btn btn-primary" value="Submit">
            <input type=button id=cancel class="btn btn-primary" value="Cancel">
        </div>
    </form>
</div>

JavaScript

$(function() {
    $('#withdraw_form').validate({
        onfocusout: true,
        onkeyup: false,
        onclick: false,
        errorElement: 'div',
        errorClass: 'help-block',
        rules: {
            amount: {
                required: true,
                number: true
            },
            phone: {
                required: true,
                phoneUS: true
            }
        },
        messages: {
            amount: {
                required: "Please enter a valid amount",
                number: "Please enter a valid number"
            },
            phone: {
                required: "Please enter a valid phone number",
                phoneUS: "Not a valid US phone nmber!"
            }
        },
        highlight: function(element) {
            $(element).closest('.form-group').removeClass('success').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        }
    });
});

Please find the non-working sample here.

The other weird thing is (say I set onfocusout to false), and directly submit with one or more but all fields invalid, it does not throw an error. The form submits successfully.

Actually the error is thrown in jQuery. I tried with the unminified version of the file but I could not find anything useful.

Please help me understand what am I doing wrong. Your help is highly appreciated.

Thanks Vivek Ragunathan

Answer 1

Quote OP:

"I have set the onfocusout to true so that I get instant feedback. But I get a javascript error:" ...

... "The other weird thing is (say I set onfocusout to false), and directly submit with one or more but all fields invalid, it does not throw an error. The form submits successfully."

true is not a valid value for this option and, as you've seen, can break the plugin in certain situations. onfocusout is already the default behavior so simply leave this option out. Only set onfocusout if you want to deactivate it (false) or use an over-riding function.

See the documentation: http://jqueryvalidation.org/validate/#onfocusout

onfocusout
Type: Boolean or Function()
Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid. Set to a Function to decide for yourself when to run validation.

A boolean true is not a valid value.

---

By default, onfocusout does nothing until the submit button triggers validation for the whole form the first time. If you want onfocusout to work immediately, then over-ride the function with something like this...

onfocusout: function (element) {
    this.element(element);
}

or preserving the default behavior to ignore radio and checkbox elements...

onfocusout: function (element) {
    if (!this.checkable(element)) {
        this.element(element);
    }
}

---

This means that to keep the "default" behavior, the onfocusout option cannot be declared at all.

These are your only three choices...

• Default behavior -> You must not set it true. Simply leave out the onfocusout option.

• Disable "on blur" validation -> set onfocusout to false.

• Over-ride on blur validation -> set onfocusout to a function.

Answer 2

I think I got it working. I was just foolish not to see that the validator phoneUS (used in the validators setup) is part of the additional-methods script file and not in the jQuery validate itself. It seems working now.

Thanks Vivek Ragunathan