堆疊我的jQuery代碼輸入，parsley.js

Question

我已經寫在照片像寫輸入未便

但是之後移動標籤了代碼，我決定加入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> 

Answer 1

您可能必須指定一個特定的data-parsley-errors-container。