2
Ich muss ein mehrstufiges Formular mit Validierung erstellen. Die Multi-Step-Buttons funktionieren und ich kann das Formular abschicken, aber das Formular wird nicht validiert. Es validiert nur die letzte Seite in dem mehrstufigen Formular, aber ich möchte die Felder validieren, bevor ich jedes Mal auf die Schaltfläche "Weiter" drücke.Formularvalidierung funktioniert nicht für Multischrittformular
Der HTML-Code:
<form name="basicform" id="basicform" method="post"
action="yourpage.html">
<!-- id will be unique, but class name will be same -->
<div id="sf1" class="frm">
<fieldset>
<legend>Step 1 of 3</legend>
<div class="form-group">
<label class="col-lg-2 control-label" for="uname">Your Name:
</label>
<div class="col-lg-6">
<input type="text" placeholder="Your Name" id="uname"
name="uname" class="form-control" autocomplete="off">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<!-- open1 is given in the class that is binded with the
click event -->
<button class="btn btn-primary open1" type="button">Next
<span class="fa fa-arrow-right"></span></button>
</div>
</div>
</fieldset>
</div>
<!-- id will be unique, but class name will be same -->
<div id="sf2" class="frm">
<fieldset>
<legend>Step 2 of 3</legend>
<div class="form-group">
<label class="col-lg-2 control-label" for="uemail">Your
Email: </label>
<div class="col-lg-6">
<input type="text" placeholder="Your Email" id="uemail"
name="uemail" class="form-control" autocomplete="off">
</div>
</div>
<div class="clearfix" style="height: 10px;clear: both;"></div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<!-- back2 unique class name -->
<button class="btn btn-warning back2" type="button"><span
class="fa fa-arrow-left"></span> Back</button>
<!-- open2 unique class name -->
<button class="btn btn-primary open2" type="button">Next
<span class="fa fa-arrow-right"></span></button>
</div>
</div>
</fieldset>
</div>
<!-- id will be unique, but class name will be same -->
<div id="sf3" class="frm">
<fieldset>
<legend>Step 3 of 3</legend>
<div class="form-group">
<label class="col-lg-2 control-label" for="upass1">Password:
</label>
<div class="col-lg-6">
<input type="password" placeholder="Your Password"
id="upass1" name="upass1" class="form-control" autocomplete="off">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="upass1">Confirm
Password: </label>
<div class="col-lg-6">
<input type="password" placeholder="Confirm Password"
id="upass2" name="upass2" class="form-control" autocomplete="off">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<!-- Unique class name -->
<button class="btn btn-warning back3" type="button"><span
class="fa fa-arrow-left"></span> Back</button>
<!-- Unique class name -->
<button class="btn btn-primary open3" type="button">Submit
</button>
<img src="spinner.gif" alt="" id="loader" style="display:
none">
</div>
</div>
</fieldset>
</div>
</form>
JavaScript/JQuery-Code:
//validation
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
jQuery().ready(function() {
var v = jQuery("#basicform").validate({
rules: {
uname: {
required: true,
minlength: 2,
maxlength: 16
},
uemail: {
required: true,
minlength: 2,
email: true,
maxlength: 100,
},
upass1: {
required: true,
minlength: 6,
maxlength: 15,
},
upass2: {
required: true,
minlength: 6,
equalTo: "#upass1",
}
},
errorElement: "span",
errorClass: "help-inline",
});
});
//navigation
jQuery().ready(function() {
// Binding next button on first step
$(".open1").click(function() {
if (v.form()) {
$(".frm").hide("fast");
$("#sf2").show("slow");
}
});
// Binding next button on second step
$(".open2").click(function() {
if (v.form()) {
$(".frm").hide("fast");
$("#sf3").show("slow");
}
});
// Binding back button on second step
$(".back2").click(function() {
$(".frm").hide("fast");
$("#sf1").show("slow");
});
// Binding back button on third step
$(".back3").click(function() {
$(".frm").hide("fast");
$("#sf2").show("slow");
});
$(".open3").click(function() {
if (v.form()) {
// optional
// used delay form submission for a seccond and show a loader
image
$("#loader").show();
setTimeout(function(){
$("#basicform").html('<h2>Thanks for your time.</h2>');
}, 1000);
// Remove this if you are not using ajax method for submitting
values
return false;
}
});
});
</script>
Danke für die Antwort. Aber die Validierung funktioniert immer noch nicht. Es scheint ein Problem mit 'v.form()' zu geben. Gibt es eine Alternative dazu? – coder1456
Haben Sie versucht, das obige Snippet auszuführen? Es hindert Sie daran, zum nächsten Schritt zu gehen, bis das Feld korrekt ausgefüllt ist. – Woodrow
Ja, ich habe Ihr Snippet ausprobiert, aber die Schaltfläche "Weiter" funktioniert nicht, obwohl alle Felder eingegeben wurden. Es funktioniert nur, wenn 'v.form()' entfernt wird, aber diese Zeitüberprüfung nicht funktioniert. Gibt es eine andere URL, die hinzugefügt werden muss, damit es funktioniert? – coder1456