I am using jquery-steps plugin in my project.Initially the tabs are working fine but when i wrote the validation script both tab and validation is not working.Is there any need to reference jquery validator plugin in my project.Any help would be appreciated.
The code i have used is given below
<head runat="server">
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/base/jquery-ui.css" />
<link href="css/jquery.steps.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/normalize.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script src="scripts/jquery.steps.js" type="text/javascript"></script>
<script src="scripts/jquery.steps.min.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<script type="text/javascript">
$(function() {
$("#form1").steps({
headerTag: "h2",
bodyTag: "fieldset",
transitionEffect: "slideLeft",
onStepChanging: function(event, currentIndex, newIndex) {
$("#form1").validate().settings.ignore = ":disabled,:hidden";
return $("#form1").valid();
},
onFinishing: function(event, currentIndex) {
$("#form1").validate().settings.ignore = ":disabled";
return $("#form1").valid();
},
onFinished: function(event, currentIndex) {
alert("Submitted!");
}
}).validate({
errorPlacement: function(error, element) {
element.before(error);
},
rules: {
confirm: {
equalTo: "#password"
}
}
});
});
</script>
<form id="form1" runat="server">
<h2>First Step</h2>
<fieldset>
<legend> First Step Info </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>
<h2>Second Step</h2>
<fieldset>
<legend>Second Step Info</legend>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut nulla nunc. Maecenas arcu sem, hendrerit a tempor quis,
sagittis accumsan tellus. In hac habitasse platea dictumst. Donec a semper dui. Nunc eget quam libero. Nam at felis metus.
Nam tellus dolor, tristique ac tempus nec, iaculis quis nisi.
</fieldset>
</form>
Problem solved.My guess was right.I need to reference jquery validator script into the project and now the validation works correctly.
My reference site was jquery-steps