заполнить метку HTML атрибутом данных без разрыва строки - PullRequest
Новая
       6

заполнить метку HTML атрибутом данных без разрыва строки

0 голосов
/ 22 января 2020

Я создаю форму, где я проверяю длину пароля. Если длина <6, то появляется сообщение об ошибке. Это сообщение создано javascript. И вот проблема, сообщение появляется с разрывом строки после каждого слова. Я также попробовал это с '', но это не работает: (</p>

Как мне создать сообщение без разрывов строки?

Спасибо за вашу помощь! 

$("#registerPass").on("focusout", function() {

  if ($("#registerPass").val().length < 6) {
    $(this).removeClass("valid").addClass("invalid");
    $('#registerPass + label').attr('data-error', 'Mindestens 6 Zeichen nötig!');
  }

});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/css/mdb.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/js/mdb.min.js"></script>



<form style="color: #757575;" action="#!">
  <div class="md-form mb-5">
    <input type="password" id="registerPass" class="form-control" required>
    <label data-error="" data-success="OK" for="registerPass">Passwort</label>
  </div>
</form>

Ответы [ 3 ]

0 голосов
/ 22 января 2020

Попробуйте добавить white-space: nowrap к вашему css и нацелиться на псевдоэлемент ::after метки.

https://jsfiddle.net/jvko4wdq/

В качестве альтернативы вы может также установить ширину label как 100% с CSS.

0 голосов
/ 22 января 2020

Установить 100% ширины для элемента, вот и все! 

<label data-error="" data-success="OK" for="registerPass" style='width: 100%'>Passwort</label>
0 голосов
/ 22 января 2020

Попробуйте добавить width: 100% к элементу label. Я проверил это и обновил кодовую базу ниже. 

$("#registerPass").on("focusout", function() {
  if ($("#registerPass").val().length < 6) {
    $(this).removeClass("valid").addClass("invalid");
    $('#registerPass + label').attr('data-error', 'Mindestens 6 Zeichen nötig!');
  }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/css/mdb.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.11/js/mdb.min.js"></script>

<form style="color: #757575;" action="#!">
  <div class="md-form mb-5">
    <input type="password" id="registerPass" class="form-control" required>
    <label data-error="" data-success="OK" for="registerPass" style="width: 100%">Passwort</label>
  </div>
</form>
...