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

Please never post a picture in place of error messages or code. It prevents this site's search function from finding this. Also, do not expect us to download your files.... please post enough code to construct a proper demo of your issue: stackoverflow.com/help/mcve — Sparky
– Sparky, Commented Jul 4, 2014 at 4:33
@Sparky, Sure. I was hoping that the subjective was informative to help get caught in searches. But agree with your suggestion. I wish you, as a distinguished jquery-validate expert here, see that in most cases users don’t intend to ask for a solution if they had known well about the problem. I have to come to know of “additional-methods” when I encountered this problem. So now I know what I should look for. I think it might be helpful for others facing a similar problem. How do you think I should edit to save this question? I thought I tried my best with samples and all. — Higher-Kinded Type
– Higher-Kinded Type, Commented Jul 4, 2014 at 12:56
Simply make an honest effort to follow this site's posting guidelines and customs. Your latest edits look fine to me. — Sparky
– Sparky, Commented Jul 4, 2014 at 14:53
There is no easy way to know if a method requires the additional-methods.js file. The safest bet is to either look inside the file or just include it all the time. You could also make a posting at GitHub to nicely ask the developer to update his documentation to note which methods require this additional file. — Sparky
– Sparky, Commented Jul 4, 2014 at 14:56

Sparky · Accepted Answer · 2014-07-05 14:48:55Z

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.

edited Jul 5, 2014 at 14:48

answered Jul 4, 2014 at 14:52

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Higher-Kinded Type Over a year ago

Thanks. I followed the function value for onfocusout but will use true which is the default and the expected behavior.

Sparky Over a year ago

@VivekRagunathan, If you're using true, then you misread my whole answer. By setting it to true, you are actually over-riding the default behavior. You should not use true because "true is not a valid value" as per the developer's official documentation. To use the default and expected behavior of onfocusout, you must leave that option out of your .validate(). Read again: jqueryvalidation.org/validate/#onfocusout

Higher-Kinded Type Over a year ago

My bad, I read it right but typed it wrong. I meant false (for the default). Thanks for correcting.

Sparky Over a year ago

@VivekRagunathan, false is not the default either. false will disable this option entirely. To get "default" behavior, the onfocusout option cannot be declared at all. See my edits.

Higher-Kinded Type · Accepted Answer · 2014-07-03 23:18:14Z

0

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

answered Jul 3, 2014 at 23:18

Higher-Kinded Type

2,0745 gold badges31 silver badges46 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related