1
嗨我想把驗證在我的形式。把錯誤類如果輸入是空的步驟明智的形式
更新的代碼
$(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>現在，這是多層次形式。如果在必填字段中保留空值，我想添加錯誤類。例如，組織名稱是必填字段。
現在我想顯示按下一個按鈕時的錯誤類。我的代碼有什麼問題？
是你做的唯一改變還是其他的東西？因爲我已經添加了使用codeigniter形式的類，如下所示：<？php $ attributes = array（'class'=>'registration-form'）; echo form_open（''，$ attributes）; ？> – Rajan
我正在添加截圖，請檢查 – Rajan
您是否添加了CSS讓背景變紅？ –