Javascript 如何以多个选项卡的形式验证表单选项卡?
我已经将我的表单分为3个选项卡,当我单击“下一步”按钮时,它将移动到下一个选项卡,最后在最后一个选项卡中,当单击“提交”时,整个表单将得到验证,这也是正确的,但我的问题是,当我单击“下一步”时,它必须仅在当前选项卡验证为真时移动到下一个选项卡 这是我的表格Javascript 如何以多个选项卡的形式验证表单选项卡?,javascript,jquery,validation,tabs,Javascript,Jquery,Validation,Tabs,我已经将我的表单分为3个选项卡,当我单击“下一步”按钮时,它将移动到下一个选项卡,最后在最后一个选项卡中,当单击“提交”时,整个表单将得到验证,这也是正确的,但我的问题是,当我单击“下一步”时,它必须仅在当前选项卡验证为真时移动到下一个选项卡 这是我的表格 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"&
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
<form name="registration_form" id="registration_form" action="save.php" method="post">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Basic Details</a></li>
<li><a href="#tabs-2">Employee Details</a></li>
<li><a href="#tabs-3">Address</a></li>
</ul>
<div id="tabs-1">
<div class="field">
<label>First Name</label>
<input type="text" name="first_name" id="first_name" />
<label>Last Name</label>
<input type="text" name="last_name" id="last_name" />
</div>
<div class="field">
<label>Age</label>
<input type="text" name="age" id="age"/>
</div>
<div class="field">
<input value="Next" type="button" id="next-1" name="1"/>
</div>
</div>
<div id="tabs-2">
<div class="field">
<label>Company</label>
<input type="text" name="company" id="company">
</div>
<div class="field">
<label>Designation</label>
<select name="designation" >
<option value="software developer">software developer</option>
<option value="software analyst">software analyst</option>
<option value="tester">tester</option>
</select>
</div>
<div class="field">
<label>Annual income</label>
<input type="text" name="income" id="income"> in Rupees
</div>
<div class="field">
<input value="Next" type="button" id="next-2" name="2" />
</div>
</div>
<div id="tabs-3">
<div class="field">
<label>Address</label>
<input type="text" name="address" id="address"
</div>
<div class="field">
<input type="submit" name="submit" value="SUBMIT" id="reg_submit" />
</div>
</div>
</div>
</form>
请帮忙,谢谢 试试这个例子
或者制作三张表格,制作三张表格。对于tab1、tab2和TAB3,我不想将其分为3种形式。我想以单一的形式做这件事。内部表单不适用于HTMLcan您可以提供完整的代码,该代码位于您编写注释的地方//验证您的输入字段@prashant@rjirji:谷歌老兄。你的问题不是验证。你的问题是逻辑,答案是,
<script type="text/javascript">
$( "#tabs" ).tabs();
var validator = $("#registration_form").validate({ rules: {
first_name: {
required: true,
maxlength:30,
},
last_name: {
required: true,
maxlength:30,
},
age: {
digits:true,
},
company: {
required: true,
},
designation: {
required: true,
},
income: {
digits:true,
},
address: {
maxlength:100,
},
},
messages: {
first_name: {
required: "Please enter First Name",
maxlength: "maximum 30 characters are allowed",
},
last_name: {
required: "Please enter Last Name",
maxlength: "maximum 30 characters are allowed",
},
age: {
digits: "Enter only digits",
},
Company: {
required: "Please enter Company",
},
designation: {
required: "Please Select Designation",
},
income: {
digits: "Enter only digits",
},
address: {
maxlength: "Maximum of 100 characters are allowed",
},
}
});
var tabs = $("#tabs").tabs();
$('[id^=next-]').click(function() {
var tabid = $(this).attr('name');
var valid = true;
var i = 0;
var $inputs = $(this).children("div").find("input");
$inputs.each(function() {
if (!validator.element(this) && valid) {
validator.focusInvalid();
valid = false;
}
});
if (valid) {
var tabId = $(this).attr('name');
$( "#tabs" ).tabs( "option", "active", tabId );
}
});
$("input[id=reg_submit]").click(function() {
$(this).parents("form").submit();
});
var next1 = false;
var next2 = false;
var next3 = false;
$('#next-1').on('click', function(){
//validate your inputs fields
var next1 = true;// assign true if validation is correct.
});
$('#next-2').on('click', function(){
//validate your inputs fields
var next2 = true;// assign true if validation is correct
});
$('#next-3').on('click', function(){
//validate your inputs fields
var next3 = true;// assign true if validation is correct
if((next1 == 'true') && (next2 == 'true') && (next3 == 'true'))
{
//submit form
}
})