[英]activate submit button only when all the fields are filled in step wizard form
我有一个水平的一页网站,每页中包含多步表单,并在其后单击下一步按钮以重定向到第二页。
我希望用户在填写给定表单中的所有必填字段之前不能进入下一页。
这是节略的代码,在月份,年份和国籍方面只有有限的选择:
<div class="step-content hide">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-4" id="artle_tellusmore_label_para" style="float:left;">
<label id="artle_tellusmore_label">Date of Birth</label id="artle_tellusmore_label">
<label id="artle_tellusmore_label">Gender</label>
<hr>
<div style="margin-left: 38px;" id="artle_tellusmore_profileimageupload">
<img style="height: 180px; width:165px;" id="output" src="image/artle_dp_dummy.png">
</div>
</div>
<div style="margin-left: 248px;" class="col-sm-8">
<div id="artle_date_of_birth_combo_box">
<select style="width: 60px;" name="birthday">
<option value="">-Day-</option>
<option value="">1</option>
<option value="">2</option>
</select>
<select style="width: 91px;" name="birthmonth">
<option value="">-Month-</option>
<option value="">January</option>
<option value="">February</option>
</select>
<select style="width: 67px;" name="birthyear">
<option value="">-Year-</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
</select>
</div>
<div id="artle_tellusmore_gender_radio_button">
<input class="radio" type="radio"><span id="">Male</span>     
<input class="radio" type="radio"><span id="">Female</span>
</div>
<div id="artle_tellusmore_phone_number">
<input style="width: 223px; margin-top: 10px; height: 33px;" required="" pattern="[0-9]{10}" x-moz-errormessage="Enter a valid phone number" size="10" value="" placeholder="Phone Number" type="tel">
</div>
<div id="artle_tellusmore_nationality">
<select name="nationality" style="width: 225px;">
<option value="">-- Nationality --</option>
<option value="afghan">Afghan</option>
<option value="albanian">Albanian</option>
<option value="zimbabwean">Zimbabwean</option>
</select>
</div>
<div id="artle_tellusmore_state">
<input type="text" value="" placeholder="State" style="width: 223px; height: 33px;" />
</div>
<hr>
<div id="artle_tellusmore_">
<input type="file" name="file" accept="image/*" onchange="loadFile(event)" id="artistprofileuploadfileField">
<p style="margin-top: 15px; font-size: 1.1em;">You can upload a jpg, gif or png files</p>
</div>
</div>
</div>
<div style="clear:both;"></div>
<button class="next-button btn hide" id="artle_next_button">Next</button>
<input type="submit" class="submit-button btn" id="artle_next_button" value="Done" />
<button class="back-button btn" id="artle_next_button">Back</button>
</div>
</div>
通过查看您的html,我认为您没有使用HTML5。 我假设您希望对所有带有类form-field的表单域进行验证。
在这种情况下,您可以使用以下代码:
首先检查所有表单元素是否具有值:
function validateForm(form) {
var isValid = true;
$('.form-field').each(function() {
if ( $(this).val() === '' )
isValid = false;
});
return isValid;
}
然后使用此更改事件来跟踪表单元素是否有任何更改,然后验证表单并启用或禁用下一个按钮
$(".form-field").change(function() {
if (validateForm() )
$(".next-button").show()
else
$(".next-button").hide()
});
请以上述代码为指导。
由于您尝试过的代码不足,无法给出确切答案。 但您正在寻找这样的东西。
$(document).ready(function(){
$('form').find('select').change(function() {
var disabled = false;
$('form').find('select').each(function() {
if ($(this).find('option:selected').val() === '') {
disabled = true;
}
});
$('form').find('input[type="submit"]').prop('disabled', disabled);
});
});
为了验证所有输入,您可以执行以下操作。
$("form").submit(function(event) {
var isValid = true;
$('input[type="text"]').each(function() {
if ( $(this).val() === '' )
isValid = false;
});
if (!isValid) event.preventDefault();
});
用于针对所有输入激活提交按钮。
$('input[type="text"]').on('input', function() {
var isValid = true;
$('input[type="text"]').each(function() {
if ( $(this).val() === '' )
isValid = false;
});
if (!isValid) $('input[type="submit"]').attr('disabled','disabled');
else $('input[type="submit"]').removeAttr('disabled');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.