如果输入为空步骤
您好我正在尝试将验证放在我的表单中。
更新代码
$(document).ready(function () {
$('.registration-form fieldset:first-child').fadeIn('slow');
$('.registration-form input[type="text"]').on('focus', function () {
$(this).removeClass('input-error');
});
// next step
$('.registration-form .btn-next').on('click', function () {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
parent_fieldset.find('input[type="text"],input[type="email"]').each(function () {
if ($(this).val() == "") {
$(this).addClass('input-error');
next_step = false;
} else {
$(this).removeClass('input-error');
}
});
if (next_step) {
parent_fieldset.fadeOut(400, function () {
$(this).next().fadeIn();
});
}
});
// previous step
$('.registration-form .btn-previous').on('click', function () {
$(this).parents('fieldset').fadeOut(400, function () {
$(this).prev().fadeIn();
});
});
// submit
$('.registration-form').on('submit', function (e) {
$(this).find('input[type="text"],input[type="email"]').each(function () {
if ($(this).val() == "") {
e.preventDefault();
$(this).addClass('input-error');
} else {
$(this).removeClass('input-error');
}
});
});
});
</script>.input-error {
color:yellow;
background-color:red;
}
/*style.css**/
/***** Top content *****/
.form-box {
padding-top: 0px;
font-family: Century, Tahoma, Arial, Verdana, Georgia;
}
.form-top {
overflow: hidden;
padding: 0 25px 15px 25px;
background: #008ade;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
text-align: left;
color: #fff;
transition: opacity .3s ease-in-out;
}
.form-top h3 {
color: #fff;
}
.form-bottom {
padding: 25px 25px 30px 25px;
background: #c3dde8;
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
text-align: left;
transition: all .4s ease-in-out;
}
.form-bottom:hover {
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
form .form-bottom button.btn {
min-width: 105px;
}
form.registration-form fieldset {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<section>
<h1 class="pagetitle"><span> <i class="material-icons md-36">card_travel</i> Create Distributor</span></h1>
</section>
<div class="assessment-container container">
<div class="row">
<div class="col-md-6 form-box">
<?php
$attributes = array('class' => 'registration-form');
echo form_open('' ,$attributes); ?>
<fieldset class="registration-form">
<div class="form-top">
<div class="form-top-left">
<h3><span><i class="material-icons md-36">account_balance</i> </span>Organization Information</h3>
</div>
</div>
<div class="form-bottom">
<div class="row">
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Organization Name</label>
<input type="text" name="" class= "form-control" required title="This Field is Required">
</div>
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Pincode</label>
<input type="text" name="" required class= "form-control">
</div>
</div>
<div class="form-group label-floating"">
<label for="i5" class="control-label">Address 1</label>
<input type="text" name="" class= "form-control">
</div>
<div class="form-group" style="margin-bottom:3px;">
<div class="row">
<div class="form-group col-md-5 label-floating">
<label for="i5" class="control-label">City</label>
<input type="text" name="" class= "form-control">
<span class="help-block">City Organization</span>
</div>
<div class="form-group col-md-5 label-floating">
<label for="i5" class="control-label">State</label>
<input type="text" name="" class= "form-control">
<span class="help-block">Insert a State</span>
</div>
</div>
</div>
<div class="form-group label-floating"">
<label for="i5" class="control-label">Country</label>
<input type="text" name="" class= "form-control">
<span class="help-block">Insert a State</span>
</div>
<button type="button" class="btn btn-next" style="margin-top: 20px;">Next</button>
</div>
</fieldset>
<!--END OF ORGANIZATION INFORMATION -->
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3><span><i class="material-icons md-36">account_box</i></span>Sales & Technical Contact</h3>
</div>
</div>
<div class="form-bottom">
<h4>Sales Contact</h4>
<div class="row">
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">First Name</label>
<input type="text" name="" class= "form-control">
</div>
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Last Name</label>
<input type="text" name="" class= "form-control">
</div>
</div>
<div class="row">
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Email</label>
<input type="text" name="" class= "form-control">
</div>
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Phone</label>
<input type="text" name="" class= "form-control">
</div>
</div>
<h4>Technical Contact</h4>
<div class="row">
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">First Name</label>
<input type="text" name="" class= "form-control">
</div>
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Last Name</label>
<input type="text" name="" class= "form-control">
</div>
</div>
<div class="row">
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Email </label>
<input type="text" name="" class= "form-control">
</div>
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Phone</label>
<input type="text" name="" class= "form-control">
</div>
</div>
<button type="button" class="btn btn-previous" style="margin-top: 20px;">Previous</button>
<button type="button" class="btn btn-next" style="margin-top: 20px;">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3><span><i class="material-icons md-36">https</i></span>Distributor Information</h3>
</div>
</div>
<div class="form-bottom">
<div class="row">
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Distributor Username</label>
<input type="text" name="" class= "form-control">
</div>
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Distributor Password</label>
<input type="text" name="" class= "form-control">
</div>
</div>
<h4>Number of License for products</h4>
<div class="row">
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">MLC</label>
<input type="text" name="" class= "form-control">
</div>
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">FMS</label>
<input type="text" name="" class= "form-control">
</div>
</div>
<div class="row">
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">UMC</label>
<input type="text" name="" class= "form-control">
</div>
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">PTT</label>
<input type="text" name="" class= "form-control">
</div>
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="submit" class="btn btn-raised btn-info">Submit</button>
</div>
</fieldset>
<?php echo form_close();?>
</div>
</div>
</div>
现在这是多级表格。如果某个值在必填字段中保持为空，我想添加错误类。例如，组织名称是必填字段。
现在我想在按下下一个按钮时显示错误类。我的代码出了什么问题？
2 个答案:
答案 0 :(得分：1)
您需要将class="registration-form"添加到表单或包含下一个按钮的某个元素，方法是添加到<fieldset class="registration-form">
我还添加了css，以便在出现错误时使输入具有红色背景，请检查以下输出：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$(document).ready(function () {
$('.registration-form fieldset:first-child').fadeIn('slow');
$('.registration-form input[type="text"]').on('focus', function () {
$(this).removeClass('input-error');
});
// next step
$('.registration-form .btn-next').on('click', function () {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
parent_fieldset.find('input[type="text"],input[type="email"]').each(function () {
if ($(this).val() == "") {
$(this).addClass('input-error');
next_step = false;
} else {
$(this).removeClass('input-error');
}
});
if (next_step) {
parent_fieldset.fadeOut(400, function () {
$(this).next().fadeIn();
});
}
});
// previous step
$('.registration-form .btn-previous').on('click', function () {
$(this).parents('fieldset').fadeOut(400, function () {
$(this).prev().fadeIn();
});
});
// submit
$('.registration-form').on('submit', function (e) {
$(this).find('input[type="text"],input[type="email"]').each(function () {
if ($(this).val() == "") {
e.preventDefault();
$(this).addClass('input-error');
} else {
$(this).removeClass('input-error');
}
});
});
});.input-error {
color:yellow;
background-color:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="registration-form">
<div class="form-top">
<div class="form-top-left">
<h3><span><i class="material-icons md-36">account_balance</i> </span>Organization Information</h3>
</div>
</div>
<div class="form-bottom">
<div class="row">
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Organization Name</label>
<input type="text" name="" class= "form-control" required title="This Field is Required">
</div>
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Pincode</label>
<input type="text" name="" required class= "form-control">
</div>
</div>
<div class="form-group label-floating"">
<label for="i5" class="control-label">Address 1</label>
<input type="text" name="" class= "form-control">
</div>
<div class="form-group" style="margin-bottom:3px;">
<div class="row">
<div class="form-group col-md-5 label-floating">
<label for="i5" class="control-label">City</label>
<input type="text" name="" class= "form-control">
<span class="help-block">City Organization</span>
</div>
<div class="form-group col-md-5 label-floating">
<label for="i5" class="control-label">State</label>
<input type="text" name="" class= "form-control">
<span class="help-block">Insert a State</span>
</div>
</div>
</div>
<div class="form-group label-floating"">
<label for="i5" class="control-label">Country</label>
<input type="text" name="" class= "form-control">
<span class="help-block">Insert a State</span>
</div>
<button type="button" class="btn btn-next" style="margin-top: 20px;">Next</button>
</div>
</fieldset>
问题进展：
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$(document).ready(function () {
$('fieldset:first-child').fadeIn('slow');
$('input[type="text"]').on('focus', function () {
$(this).removeClass('input-error');
});
// next step
$('.btn-next').on('click', function () {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
parent_fieldset.find('input[type="text"],input[type="email"]').each(function () {
if ($(this).val() == "") {
$(this).addClass('input-error');
next_step = false;
} else {
$(this).removeClass('input-error');
}
});
if (next_step) {
parent_fieldset.fadeOut(400, function () {
$(this).next().fadeIn();
});
}
});
// previous step
$('.btn-previous').on('click', function () {
$(this).parents('fieldset').fadeOut(400, function () {
$(this).prev().fadeIn();
});
});
// submit
$('button[type="submit"]').on('click', function (e) {
$(this).parents('fieldset').find('input[type="text"],input[type="email"]').each(function () {
if ($(this).val() == "") {
e.preventDefault();
$(this).addClass('input-error');
} else {
$(this).removeClass('input-error');
}
});
});
});.input-error {
color:yellow;
background-color:red;
}
/*style.css**/
/***** Top content *****/
.form-box {
padding-top: 0px;
font-family: Century, Tahoma, Arial, Verdana, Georgia;
}
.form-top {
overflow: hidden;
padding: 0 25px 15px 25px;
background: #008ade;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
text-align: left;
color: #fff;
transition: opacity .3s ease-in-out;
}
.form-top h3 {
color: #fff;
}
.form-bottom {
padding: 25px 25px 30px 25px;
background: #c3dde8;
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
text-align: left;
transition: all .4s ease-in-out;
}
.form-bottom:hover {
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
form .form-bottom button.btn {
min-width: 105px;
}
form.registration-form fieldset {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<section>
<h1 class="pagetitle"><span> <i class="material-icons md-36">card_travel</i> Create Distributor</span></h1>
</section>
<div class="assessment-container container">
<div class="row">
<div class="col-md-6 form-box">
<?php
$attributes = array('class' => 'registration-form');
echo form_open('' ,$attributes); ?>
<fieldset class="registration-form">
<div class="form-top">
<div class="form-top-left">
<h3><span><i class="material-icons md-36">account_balance</i> </span>Organization Information</h3>
</div>
</div>
<div class="form-bottom">
<div class="row">
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Organization Name</label>
<input type="text" name="" class= "form-control" required title="This Field is Required">
</div>
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Pincode</label>
<input type="text" name="" required class= "form-control">
</div>
</div>
<div class="form-group label-floating"">
<label for="i5" class="control-label">Address 1</label>
<input type="text" name="" class= "form-control">
</div>
<div class="form-group" style="margin-bottom:3px;">
<div class="row">
<div class="form-group col-md-5 label-floating">
<label for="i5" class="control-label">City</label>
<input type="text" name="" class= "form-control">
<span class="help-block">City Organization</span>
</div>
<div class="form-group col-md-5 label-floating">
<label for="i5" class="control-label">State</label>
<input type="text" name="" class= "form-control">
<span class="help-block">Insert a State</span>
</div>
</div>
</div>
<div class="form-group label-floating"">
<label for="i5" class="control-label">Country</label>
<input type="text" name="" class= "form-control">
<span class="help-block">Insert a State</span>
</div>
<button type="button" class="btn btn-next" style="margin-top: 20px;">Next</button>
</div>
</fieldset>
<!--END OF ORGANIZATION INFORMATION -->
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3><span><i class="material-icons md-36">account_box</i></span>Sales & Technical Contact</h3>
</div>
</div>
<div class="form-bottom">
<h4>Sales Contact</h4>
<div class="row">
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">First Name</label>
<input type="text" name="" class= "form-control">
</div>
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Last Name</label>
<input type="text" name="" class= "form-control">
</div>
</div>
<div class="row">
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Email</label>
<input type="text" name="" class= "form-control">
</div>
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Phone</label>
<input type="text" name="" class= "form-control">
</div>
</div>
<h4>Technical Contact</h4>
<div class="row">
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">First Name</label>
<input type="text" name="" class= "form-control">
</div>
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Last Name</label>
<input type="text" name="" class= "form-control">
</div>
</div>
<div class="row">
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Email </label>
<input type="text" name="" class= "form-control">
</div>
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Phone</label>
<input type="text" name="" class= "form-control">
</div>
</div>
<button type="button" class="btn btn-previous" style="margin-top: 20px;">Previous</button>
<button type="button" class="btn btn-next" style="margin-top: 20px;">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3><span><i class="material-icons md-36">https</i></span>Distributor Information</h3>
</div>
</div>
<div class="form-bottom">
<div class="row">
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Distributor Username</label>
<input type="text" name="" class= "form-control">
</div>
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Distributor Password</label>
<input type="text" name="" class= "form-control">
</div>
</div>
<h4>Number of License for products</h4>
<div class="row">
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">MLC</label>
<input type="text" name="" class= "form-control">
</div>
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">FMS</label>
<input type="text" name="" class= "form-control">
</div>
</div>
<div class="row">
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">UMC</label>
<input type="text" name="" class= "form-control">
</div>
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">PTT</label>
<input type="text" name="" class= "form-control">
</div>
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="submit" class="btn btn-raised btn-info">Submit</button>
</div>
</fieldset>
<?php echo form_close();?>
</div>
</div>
</div>
答案 1 :(得分：0)
现在它可以工作，你在元素类声明中有几个双引号，如下所示：class="form-group label-floating""我只清理了一下：）
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$(document).ready(function () {
$('.registration-form fieldset:first-child').fadeIn('slow');
$('.registration-form input[type="text"]').on('focus', function () {
$(this).removeClass('input-error');
});
// next step
$('.registration-form .btn-next').on('click', function () {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
parent_fieldset.find('input[type="text"],input[type="email"]').each(function () {
if ($(this).val() == "") {
$(this).addClass('input-error');
next_step = false;
} else {
$(this).removeClass('input-error');
}
});
if (next_step) {
parent_fieldset.fadeOut(400, function () {
$(this).next().fadeIn();
});
}
});
// previous step
$('.registration-form .btn-previous').on('click', function () {
$(this).parents('fieldset').fadeOut(400, function () {
$(this).prev().fadeIn();
});
});
// submit
$('.registration-form').on('submit', function (e) {
$(this).find('input[type="text"],input[type="email"]').each(function () {
if ($(this).val() == "") {
e.preventDefault();
$(this).addClass('input-error');
} else {
$(this).removeClass('input-error');
}
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="registration-form">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3><span><i class="material-icons md-36">account_balance</i> </span>Organization Information</h3>
</div>
</div>
<div class="form-bottom">
<div class="row">
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Organization Name</label>
<input type="text" name="" class= "form-control" required title="This Field is Required">
</div>
<div class="form-group col-md-6 label-floating">
<label for="i5" class="control-label">Pincode</label>
<input type="text" name="" required class= "form-control">
</div>
</div>
<div class="form-group label-floating">
<label for="i5" class="control-label">Address 1</label>
<input type="text" name="" class= "form-control">
</div>
<div class="form-group" style="margin-bottom:3px;">
<div class="row">
<div class="form-group col-md-5 label-floating">
<label for="i5" class="control-label">City</label>
<input type="text" name="" class= "form-control">
<span class="help-block">City Organization</span>
</div>
<div class="form-group col-md-5 label-floating">
<label for="i5" class="control-label">State</label>
<input type="text" name="" class= "form-control">
<span class="help-block">Insert a State</span>
</div>
</div>
</div>
<div class="form-group label-floating">
<label for="i5" class="control-label">Country</label>
<input type="text" name="" class= "form-control">
<span class="help-block">Insert a State</span>
</div>
<button type="button" class="btn btn-next" style="margin-top: 20px;">Next</button>
</div>
</fieldset>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？