brauche jquery.validate ohne absenden
Ich habe einige der anderen Posts darüber gelesen und bin immer noch nicht gegangen. Ich versuche es wirklich einfach zu halten. Ich muss Abschnitte eines Formulars validieren, die in einem jQuery-Akkordeon ausgeblendet / angezeigt werden, bevor ich es endgültig abschicke. Ich habe verwendetjquery.validate.js
für eine lange Zeit und solange ich am validierensubmit
alles ist gut, aber jetzt, wenn ich versuche, auf Knopfdruck zu validierenclick
es funktioniert nicht.
<script type="text/javascript">
jQuery().ready(function(){
var demo = $(".demo").accordion({
header: '.header',
event: false
});
var nextButtons = $([]);
$("h3.header", demo).each(function(index) {
nextButtons = nextButtons.add($(this)
.next()
.children(":button")
.filter(".next, .previous")
.click(function() {
demo.accordion("activate", index + ($(this).is(".next") ? 1 : -1))
}));
});
});
</script>
<script type="text/javascript">
$(".next").click(function(){
$("#test").validate({
rules: {
name: "required", // simple rule, converted to {required:true}
email: {// compound rule
required: true,
email: true
},
comment: {
required: true
}
},
message: {
comment: "Please enter a comment."
}
});
});
</script>
<div class="demo">
<form action="#" method="post" id="test">
<fieldset>
<div id="accordion">
<h3 class="header"><a href="#">Section 1</a></h3>
<div class="sec1">
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your
full name" class="required" />
<input type="button" class="next" value="NEXT" />
</div>
<h3 class="header"><a href="#">Section 2</a></h3>
<div class="sec2">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter
your email address" class="required" />
<input type="button" class="next" value="NEXT" />
<input type="button" class="previous" value="Previous"/>
</div>
<h3 class="header"><a href="#">Section 3</a></h3>
<div class="sec3">
<label for="message">Message:</label>
<textarea id="message" placeholder="What's on your
mind?" class="required"></textarea>
<input type="submit" value="Send message" />
<input type="button" class="previous" value="Previous"/>
</div>
</fieldset>
</form>
</div>
</div><!-- End demo -->