Я новичок в jQuery, и я ' m пытается использовать его и плагин проверки (http://docs.jquery.com/Plugins/Validation), чтобы создать форму, состоящую из нескольких частей, с несколькими вкладками для разных разделов. Прямо сейчас у меня есть несколько вкладок, а кнопка «Далее» переключает на следующую вкладку.
У меня проблема в том, что когда я наконец отправляю на последней странице, форма проверяется правильно, но если на другой странице есть ошибки, пользователь не уведомляется, а проверка действительно происходит только после того, как «отправить» щелкнул.
Как мне проверить каждую отдельно, когда я нажимаю «Далее»? Я действительно не хочу создавать несколько форм или отслеживать скрытые поля: S Есть предложения?
Спасибо!
<script type="text/javascript">
$(document).ready(function() {
//....stuff
//tabs
var tabs = $("#tabs").tabs();
$(".nexttab").click(function() {
//var selected = $("#tabs").tabs("option", "selected");
//$("#tabs").tabs("option", "selected", selected + 1);
$("#tabs").tabs("select", this.hash);
});
//use link to submit form instead of button
$("a[id=submit]").click( function(){
$(this).parents("form").submit();
});
//form validation
var validator = $("#myForm").validate();
});
</script>
<form class="cmxform" id="myForm" method="post" action="">
<div id="tabs">
<ul>
<li><a href="#general">General</a></li>
<li><a href="#tab2"></a></li>
</ul>
<div id="general">
....stuff...
<p>
<a class="nexttab navbutton" href="#tab2"><span>Next</span></a>
</p>
</div>
<div id="tab2">
<h2>Tab2</h2>
<p>
<a class="nexttab navbutton" href="#general"><span>Prev</span></a>
<a class="submit navbutton" id="submit" href="#"><span>Submit</span></a>
</p>
</div>
</div>
</form>
Редактировать:
@Andrew:
Я сделал некоторую комбинацию из вашего 2-го примера и отключил вкладки. Кажется, работает, помимо обновления страницы, можно повторно отключить вкладки.
var tabs = $("#tabs").tabs({
disabled: [1,2,3,4,5],
select: function(event, ui) {
var valid = true;
var current = $(this).tabs("option", "selected");
var panelId = $("#tabs ul a").eq(current).attr("href");
if(ui.index > current)
{
$(panelId).find("input").each(function() {
//console.log(valid);
if (!validator.element(this) && valid) {
valid = false;
}
});
}
return valid;
}
});
В сочетании с:
$(".nexttab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("enable", selected+1);
$("#tabs").tabs("option", "selected", selected + 1);
});