gpt4 book ai didi

javascript - 如果输入为空,则以逐步形式放置错误类

转载 作者:太空宇宙 更新时间:2023-11-04 16:02:53 25 4
gpt4 key购买 nike

您好,我正在尝试将验证放入我的表单中。

更新代码

$(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>&nbsp;<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>&nbsp;</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>

现在这是多级表单。如果必填字段上的值保留为空,我想添加错误类,例如组织名称是必填字段。

现在我想在按下下一个按钮时显示错误类。我的代码有什么问题?

form class

最佳答案

您需要添加class="registration-form"到您的表单或包含下一个按钮的某个元素,就像我通过添加到 <fieldset class="registration-form"> 所做的那样

我还添加了 css 以使输入在出现错误时具有红色背景,请检查下面的输出:

$(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>&nbsp;</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>

问题进展:

$(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>&nbsp;<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>&nbsp;</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>

关于javascript - 如果输入为空,则以逐步形式放置错误类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42131299/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com