但是,我决定将Parsley.js文件添加到我的网站以验证表单,但在显示错误后,它会与标签叠加。我已经改变了代码的位置,它没有用。当有验证错误时,某些输入也不会变色。这是该页面的完整代码。我没有找到问题所在。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.min.css">
<style type="text/css">
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
/* Colors */
/* ---------------------------------------- */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
text-align: center;
font-family: 'Lato', 'sans-serif';
font-weight: 400;
}
a {
text-decoration: none;
}
form {
padding: 4em 10%;
}
h2.heading {
font-size: 18px;
text-transform: uppercase;
font-weight: 300;
text-align: left;
color: #506982;
border-bottom: 1px solid #506982;
padding-bottom: 3px;
margin-bottom: 20px;
}
.controls {
text-align: left;
position: relative;
margin-bottom: 5px;
}
.controls input[type="text"],
.controls input[type="email"],
.controls input[type="tel"],
.controls textarea,
.controls button,
.controls select {
padding: 12px;
font-size: 14px;
border: 1px solid #c6c6c6;
width: 100%;
margin-bottom: 18px;
color: #888;
font-family: 'Lato', 'sans-serif';
font-size: 16px;
font-weight: 300;
background-color: #fff;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.controls input[type="text"]:focus, .controls input[type="text"]:hover,
.controls input[type="email"]:focus,
.controls input[type="email"]:hover,
.controls input[type="tel"]:focus,
.controls input[type="tel"]:hover,
.controls textarea:focus,
.controls textarea:hover,
.controls button:focus,
.controls button:hover,
.controls select:focus,
.controls select:hover {
outline: none;
border-color: #9FB1C1;
}
.controls input[type="text"]:focus + label, .controls input[type="text"]:hover + label,
.controls input[type="email"]:focus + label,
.controls input[type="email"]:hover + label,
.controls input[type="tel"]:focus + label,
.controls input[type="tel"]:hover + label,
.controls textarea:focus + label,
.controls textarea:hover + label,
.controls button:focus + label,
.controls button:hover + label,
.controls select:focus + label,
.controls select:hover + label {
color: #077ABC;
cursor: text;
}
.controls input[type="date"]:focus + label {
margin-bottom: 5px;
}
.controls .fa-sort {
position: absolute;
right: 10px;
top: 17px;
color: #999;
}
.controls select {
-moz-appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.controls label {
position: absolute;
left: 8px;
top: 12px;
color: #999;
font-size: 16px;
display: inline-block;
padding: 4px 10px;
font-weight: 400;
background-color: rgba(255, 255, 255, 0);
pointer-events: none;
-moz-transition: color 0.3s, top 0.3s, background-color 0.8s;
-o-transition: color 0.3s, top 0.3s, background-color 0.8s;
-webkit-transition: color 0.3s, top 0.3s, background-color 0.8s;
transition: color 0.3s, top 0.3s, background-color 0.8s;
}
.controls label.active {
top: -15px;
color: #555;
background-color: white;
}
.controls textarea {
resize: none;
height: 200px;
}
.controls button {
cursor: pointer;
background-color: #0db4eb;
border: none;
color: #fff;
padding: 12px 0;
}
.controls button:hover {
background-color: #0066ff;
}
#addcourse {
background-color: #f9f9f9;
padding-top: 40px;
}
input.form-control {
border-bottom: none;
border: 1px solid #c6c6c6;
background-color: #fff;
}
.qiymetinput {
position: relative;
}
.qiymetinput:after {
position: absolute;
right: 10px;
top: 20px;
content: 'AZN';
font-size: 35px;
}
input.parsley-success,
select.parsley-success,
textarea.parsley-success {
color: #468847;
background-color: #DFF0D8;
border: 1px solid #D6E9C6;
}
input.parsley-error,
select.parsley-error,
textarea.parsley-error {
color: #B94A48;
background-color: #F2DEDE;
border: 1px solid #EED3D7;
}
.parsley-errors-list {
margin: 2px 0 13px;
padding: 0;
list-style-type: none;
font-size: 0.9em;
line-height: 0.9em;
opacity: 0;
transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
}
.parsley-errors-list.filled {
opacity: 1;
}
</style>
<section id="addcourse">
<div class="addcoursediv">
<div id="messages"></div>
<?php $attributes = array('class' => 'rex-forms', 'name' => 'addcourse', 'id' => 'addcourse', 'data-parsley-validate' => ''); ?>
<?php echo form_open_multipart('courses/addcourse', $attributes); ?>
<!-- General -->
<div class="form-group">
<h2 class="heading">General</h2>
<div class="controls">
<input type="text" id="name" class="floatLabel" name="name" data-parsley-minlength="3" required="">
<label for="name">Название курсов</label>
</div>
<div class="controls">
<i class="fa fa-sort"></i>
<select class="floatLabel" id="duration" name="duration" required="">
<option value=""></option>
<option value="1">1 Месяц</option>
<option value="2">2 Месяца</option>
<option value="3">3 Месяца</option>
<option value="4">4 Месяца</option>
<option value="5">5 Месяцев</option>
<option value="6">6 Месяцев</option>
<option value="7">7 Месяцев</option>
<option value="8">8 Месяцев</option>
<option value="9">9 Месяцев</option>
<option value="10">10 Месяцев</option>
<option value="11">11 Месяцев</option>
<option value="12">12+ Месяцев</option>
</select>
<label for="fruit">Длительность</label>
</div>
<div class="controls">
<i class="fa fa-sort"></i>
<select class="floatLabel" id="certification" name="certification" required="">
<option value=""></option>
<option value="0">Нет</option>
<option value="1">Да</option>
</select>
<label for="certification">Сертификат</label>
</div>
<div class="controls">
<i class="fa fa-sort"></i>
<select class="floatLabel" id="category" name="category" required="">
<option value="">
</option>
<?php foreach($categories as $cat): ?>
<optgroup label="<?= $cat['name_rus']; ?>">
<?php
$query = $this->db->get_where('categories', array('parent_id' => $cat['id']));
?>
<?php foreach($query->result() as $subcat): ?>
<option value="<?= $subcat->id; ?>"><?= $subcat->name_rus; ?></option>
<?php endforeach; ?>
</optgroup>
<?php endforeach; ?>
</select>
<label for="certification">Категория</label>
</div>
<div class="controls qiymetinput">
<input type="text" id="price" class="floatLabel" name="price" data-parsley-type="integer" required="">
<label for="price">Стоимость</label>
</div>
<script>
$(document).ready(function() {
$("#begining").datepicker({
format: 'dd-mm-yyyy',
todayHighlight: true
});
$("#begining").on("change", function () {
var fromdate = $(this).val();
});
});
</script>
<div class="controls">
<input class="form-control floatLabel" name="begining" id="begining" type="text" required="">
<label for="begining">Начало</label>
</div>
<script type="text/javascript">
CKEDITOR.on('instanceReady', function(){
$.each( CKEDITOR.instances, function(instance) {
CKEDITOR.instances[instance].on("change",function(e) {
for ( instance in CKEDITOR.instances)
CKEDITOR.instances[instance].updateElement();
});
});
});
</script>
<h2 class="heading">Description</h2>
<div class="controls">
<textarea name="description" id="description" required=""></textarea>
</div>
<script>
CKEDITOR.replace('description');
</script>
<h2 class="heading">Purpose</h2>
<div class="controls">
<textarea name="purpose" id="purpose" required=""></textarea><br><br>
<button type="submit" name="submit">Submit</button>
</div>
<script>
CKEDITOR.replace('purpose');
</script>
</div>
</form>
</div>
</section>
<script type="text/javascript">
(function($){
function floatLabel(inputType){
$(inputType).each(function(){
var $this = $(this);
// on focus add cladd active to label
$this.focus(function(){
$this.next().addClass("active");
});
//on blur check field and remove class if needed
$this.blur(function(){
if($this.val() === '' || $this.val() === 'blank'){
$this.next().removeClass();
}
});
});
}
// just add a class of "floatLabel to the input field!"
floatLabel(".floatLabel");
})(jQuery);
</script>
答案 0 :(得分:0)
您可能需要指定特定的data-parsley-errors-container
。