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>

Can you post your HTML snippet as well? – Selvaraj M A Apr 23 '14 at 05:22 — Selvaraj M A, Apr 23 '14 at 05:22
Hi @SelvarajMA i just posted my HTML code – Terinah14 Apr 23 '14 at 05:47 — Terinah14, Apr 23 '14 at 05:47

score 9 · Answer 1 · answered May 22 '14 at 08:00

9

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

answered May 22 '14 at 08:00

Indivision Dev

979
10
14

Just adding a comment that this affects JQuery Steps, in the event that someone else is searching for this. JQuery Steps is doing a great job of using css and script files (like jquery.validate) that it doesn't specify in any particular place. – Eric Dec 04 '15 at 19:19
Yep, you'll also need the CSS file (jquery.steps.css) as well as the js file: https://github.com/rstaib/jquery-steps/tree/master/demo/css – John Lewis Jan 22 '19 at 16:04

score 1 · Accepted Answer · answered Apr 23 '14 at 05:50

1

jquery-steps documentation doesn't have any method called validate and valid. Please check whether you have included the form validation plugin

answered Apr 23 '14 at 05:50

Selvaraj M A

3,006
3
27
45

Can you create a fiddle? – Selvaraj M A Apr 23 '14 at 05:56

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

2 Answers2