I'm by no stretch of the imagination a web developer, so this is likely quite a basic issue.
I'm trying to copy the basic form from an example on the site. Here's my full index.html:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.1.0.js"></script>
<script src="jquery.steps.min.js"></script>
<script src="bootstrap.min.js"></script>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container" id="wizard">
<section id="basic-form">
<h2 class="page-header">Basic Form Example</h2>
<form id="example-form" action="#">
<h3>Account</h3>
<section>
<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>
</section>
<h3>Profile</h3>
<section>
<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">
<p>(*) Mandatory</p>
</section>
<h3>Finish</h3>
<section>
<input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
</section>
</form>
</div>
</section>
<script>
var form = $("#example-form").show();
form.validate({
errorPlacement: function errorPlacement(error, element) { element.before(error); },
rules: {
confirm: {
equalTo: "#password"
}
}
});
form.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex)
{
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
},
onFinishing: function (event, currentIndex)
{
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinished: function (event, currentIndex)
{
alert("Submitted!");
}
});
</script>
</body>
</html>
When I open this file, I get none of the nice bootstrap style and I get an error that form.validate({ //... is not a function.
I searched the jquery.steps.min.js for a validate method and, indeed, I could not find one.
Why doesn't this example work out of the box? Am I missing something from this example?
Form validation is not a part of jQuery Steps. You've need to include "jQuery Validation Plugin"