Form Validation on Jquery-steps: undefined is not a function on .validate() function

Question

I don't understand whats going on. Im trying to implement the form validation with the Jquery-steps and when I click the next button, my form should be validated. But it is not and it is returning an error on validate function.

Here is my script

$(function () {
  $("#form-3").steps({
    bodyTag: "fieldset",
    onStepChanging: function (event, currentIndex, newIndex) {
        // Always allow going backward even if the current step contains invalid fields!
        if (currentIndex > newIndex) {
            return true;
        }

        // Forbid suppressing "Warning" step if the user is to young
        if (newIndex === 3 && Number($("#age").val()) < 18) {
            return false;
        }

        var form = $(this);

        // Clean up if user went backward before
        if (currentIndex < newIndex) {
            // To remove error styles
            $(".body:eq(" + newIndex + ") label.error", form).remove();
            $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
        }

        // Disable validation on fields that are disabled or hidden.
        form.validate().settings.ignore = ":disabled,:hidden";

        // Start validation; Prevent going forward if false
        return form.valid();
    }
  });
});

Do i need a form validation js file to make that work? I tried some form validation js file but still it is not working. thanks.

This is my html code

<form id="form-3" action="#">
<h1>Account</h1>
<fieldset>
    <legend>Account Information</legend>

    <label for="userName">User name *</label>
    <input id="userName" name="userName" type="text" class="required">
    <label for="password">Password *</label>
    <input id="password" name="password" type="text" class="required">
    <label for="confirm">Confirm Password *</label>
    <input id="confirm" name="confirm" type="text" class="required">
    <p>(*) Mandatory</p>
</fieldset>

<h1>Profile</h1>
<fieldset>
    <legend>Profile Information</legend>

    <label for="name">First name *</label>
    <input id="name" name="name" type="text" class="required">
    <label for="surname">Last name *</label>
    <input id="surname" name="surname" type="text" class="required">
    <label for="email">Email *</label>
    <input id="email" name="email" type="text" class="required email">
    <label for="address">Address</label>
    <input id="address" name="address" type="text">
    <label for="age">Age (The warning step will show up if age is less than 18) *</label>
    <input id="age" name="age" type="text" class="required number">
    <p>(*) Mandatory</p>
</fieldset>

<h1>Warning</h1>
<fieldset>
    <legend>You are to young</legend>

    <p>Please go away ;-)</p>
</fieldset>

<h1>Finish</h1>
<fieldset>
    <legend>Terms and Conditions</legend>

    <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
</fieldset>
</form>

Answer 1

You need to add the jQuery Validation Plugin from: http://jqueryvalidation.org/