0
Das Formular wird zum nächsten Schritt verschoben, auch wenn es nicht validiert ist. Ich möchte, dass das Formular validiert wird, bevor es zum nächsten Schritt übergeht.Es wird validiert, wenn ich nur das letzte Feldset absende validiert werden. Wie kann ich die Abfrageprüfung beim Klicken auf die nächste Schaltfläche aktivieren?Weiter zum nächsten Schritt, wenn fieldset gültig ist
$("#formValidate").validate({
rules: {
user_name: {
required: true,
minlength: 10
},
name: {
required: true,
minlength: 5
},
name1: {
required: true,
minlength: 5
},
name2: {
required: true,
minlength: 5
},
usr_email: {
required: true,
email: true
},
cemail1: {
required: true,
email: true
},
cemail2: {
required: true,
email: true
},
cemail3: {
required: true,
email: true
},
cpassword: {
required: true,
minlength: 5,
equalTo: "#password"
},
web: {
required: true,
url: true
},
crole: "required",
ccomment: {
required: true,
minlength: 15
},
cgender: "required",
cagree: "required",
tel: {
required: true,
minlength: 10,
phone: true
},
cphone1: {
required: true,
minlength: 10,
digits: true
},
cphone2: {
required: true,
minlength: 10,
digits: true
},
cphone3: {
required: true,
minlength: 10,
digits: true
},
fees: "required",
Student_Strength: "required",
faculty_Strength: "required",
},
//For custom messages
messages: {
user_name: {
required: "Please enter a name",
minlength: "Enter at least 10 characters",
digits: false,
},
name: {
required: "<p class='val'>This field is required</p>",
minlength: "<p class='val'>Enter at least 5 characters</p>",
},
name1: {
required: "<p class='val'>This field is required</p>",
minlength: "<p class='val'>Enter at least 5 characters</p>",
},
name2: {
required: "<p class='val'>This field is required</p>",
minlength: "<p class='val'>Enter at least 5 characters</p>",
},
web: "Please enter your website",
tel: "Please enter a valid phone number",
cphone1: "<p class='val'>Please enter a valid phone number</p>",
cphone2: "<p class='val'>Please enter a valid phone number</p>",
cphone3: "<p class='val'>Please enter a valid phone number</p>",
fees: "we think you forget to mention the fees",
Student_Strength: "we think you forget to mention the student strength",
faculty_Strength: "we think you forget to mention the faculty strength",
cemail1: "Please enter a valid email",
cemail1: "<p class='val'>Please enter a valid email</p>",
cemail2: "<p class='val'>Please enter a valid email</p>",
cemail3: "<p class='val'>Please enter a valid email</p>",
},
errorElement: 'div',
errorPlacement: function(error, element) {
var placement = $(element).data('error');
if (placement) {
$(placement).append(error)
} else {
error.insertAfter(element);
}
}
});
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function() {
if (animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50) + "%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale(' + scale + ')'
});
next_fs.css({
'left': left,
'opacity': opacity
});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".previous").click(function() {
if (animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1 - now) * 50) + "%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'left': left
});
previous_fs.css({
'transform': 'scale(' + scale + ')',
'opacity': opacity
});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".submit").click(function() {
return false;
})
$(document).ready(function() {
var current = 1;
widget = $(".step");
btnnext = $(".next");
btnback = $(".previous");
btnsubmit = $(".submit");
// next button click action
btnnext.click(function() {
if (current > 1) {
current = current - 2;
if (current < widget.length) {
$('.basic').validate;
widget.not(':eq(' + (current++) + ')').hide();
setProgress(current);
}
}
hideButtons(current);
})
// Back button click action
btnback.click(function() {
if (current > 1) {
current = current - 2;
if (current < widget.length) {
widget.show();
widget.not(':eq(' + (current++) + ')').hide();
setProgress(current);
}
}
hideButtons(current);
})
// Submit button click
btnsubmit.click(function() {
alert("Submit button clicked");
});
$('.form').validate({ // initialize plugin
ignore: ":not(:visible)",
rules: {
name: "required"
},
});
});
// Hide buttons according to the current step
hideButtons = function(current) {
var limit = parseInt(widget.length);
$(".action").hide();
if (current < limit) btnnext.show();
if (current > 1) btnback.show();
if (current == limit) {
btnnext.hide();
btnsubmit.show();
}
}/* form */
#formValidate {
margin: 50px auto;
position: relative;
height: 130%;
}
#formValidate fieldset {
background: white;
border: 0 none;
border-radius: 3px;
padding: 20px 30px;
width: 80%;
margin: 0 10%;
/*stacking fieldsets above each other*/
position: absolute;
}
/*Hide all except first fieldset*/
#formValidate fieldset:not(:first-of-type) {
display: none;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: #333;
text-transform: uppercase;
font-size: 9px;
width: 25%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: #056eba;
position: absolute;
left: -50%;
top: 9px;
z-index: -1;
/*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps*/
#progressbar li.active:before,
#progressbar li.active:after {
background: #056eba;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="materialize/js/jquery.validate.js"></script>
<script type="text/javascript" src="materialize/js/additional-methods.js"></script>
<script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>
<form class="col s12 formValidate" id="formValidate" method="post" action="register.php" name="regForm">
<!-- progressbar -->
<ul id="progressbar">
<li class="active step">Basic Information</li>
<li class="step">Additional Information</li>
<li class="step">Details</li>
<li class="step">Additional Contact Information</li>
</ul>
<!-- fieldsets -->
<fieldset class="basic">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">business</i>
<input id="full_name" type="text" length="150" name="user_name" data-error=".errorTxt1">
<label for="full_name" data-success="Perfect!">Please Let us know your name*</label>
<div class="errorTxt1 right"></div>
</div>
</div>
<input type="button" name="next" class="butt next action-button right" value="Next" />
</fieldset>
<fieldset id="inc">
<div class="row">
<div class="input-field col s12">
<select name="course" data-error=".errorTxt7" multiple>
<option value="" disabled selected>Choose your course</option>
<option value="1">Arts</option>
<option value="2">Science</option>
<option value="3">Commerce</option>
</select>
<label>What courses does your university offer*</label>
<div class="errorTxt7 right"></div>
</div>
</div>
<input type="button" name="previous" class="butt previous action-button" value="Previous" />
<input type="button" name="next" class="butt next action-button right" value="Next" />
</fieldset>
<fieldset class="container">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">assignment</i>
<input id="fees" name="fees" type="number" placeholder="10000" step="100" min="100" data-error=".errorTxt8" class="validate" />
<label for="fees">Approximated Academic Fees*</label>
<div class="errorTxt8 right"></div>
</div>
</div>
<input type="button" name="previous" class="butt previous action-button" value="Previous" />
<input type="button" name="next" class="butt next action-button right" value="Next" />
</fieldset>
<fieldset>
<div class="row">
<label>
Please Let us know some additional contact details*
</label>
<table class="highlight">
<th>
Contact details
</th>
<tr>
<td class="responsive-table">Contact Person
<td class="responsive-table">Phone number
<td class="responsive-table">E-mail
</tr>
<tr>
<td>
<input type="text" placeholder="Administrator" length="120" class="validate" data-error=".errorTxt17" name="name" />
<div class="errorTxt17"></div>
<td>
<input type="text" placeholder="Phone number" length="15" name="cphone1" class="validate" data-error=".errorTxt11" />
<div class="errorTxt11"></div>
<td>
<input type="text" placeholder="e-mail" length="80" name="cemail1" class="validate" data-error=".errorTxt12">
<div class="errorTxt12"></div>
</tr>
</table>
</div>
<button class="butt waves-effect waves-light right submit" name="doRegister" type="submit" id="doRegister" value="Register">Submit
<i class="material-icons right">send</i>
</button>
<input type="button" name="previous" class="butt previous action-button left" value="Previous" />
</fieldset>
</form>
</div>