jQuery Form Validation - Uncaught TypeError: undefined is not a function

Question

I am using http://jqueryvalidation.org/ to validate a form. The error I am getting is Uncaught TypeError: undefined is not a function the error comes from a line in the JS code below

JS

The submitHandler is as follows

submitHandler: function (form) {
  error2.hide();
  form[0].submit(); // error happens on this line
}

HTML

<form action="login.asp" method="post" id="form_sample_2" class="form-horizontal">
    <div class="form-body">
        <div class="alert alert-danger display-hide">
            <button class="close" data-close="alert"></button>
            You have some form errors. Please check below.
        </div>

        <div class="form-group">
            <label class="control-label col-md-3">Username <span class="required">
                                            * </span>
            </label>
            <div class="col-md-6">
                <div class="input-icon right">
                    <i class="fa"></i>
                    <input type="text" class="form-control" name="username" />
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">Password <span class="required">
                                            * </span>
            </label>
            <div class="col-md-6">
                <div class="input-icon right">
                    <i class="fa"></i>
                    <input type="password" class="form-control" name="password" />
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">PIN <span class="required">
                                            * </span>
            </label>
            <div class="col-md-6">
                <div class="input-icon right">
                    <i class="fa"></i>
                    <input type="text" class="form-control" name="pin" />
                </div>
            </div>
        </div>

    </div>
</form>

The form actually submits and errors show where needed but this JS keeps coming up on form submission. Any advice?

Answer 1

form paramsin the submitHandler is the form dom element so form[0] will be undefined which is causing the problem.

submitHandler: function (form) {
  error2.hide();
  form.submit(); // error happens on this line
}

Answer 2

try this:

submitHandler: function (form) {
     $( '#error2' ).hide();
     form.submit(); 
}