Question

我编写了代码，在输入中写入smth后移动标签，如照片

但是，我决定将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。

使用parsley.js堆叠我的jquery代码以获取输入

1 个答案: