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

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