fill HTML label with data attribute without line break

Question

I create a form where I check the length of a password. If length is <6 then an error message appears. This message is created by javascript. And here is the problem, the message appears with a line break after every word. I also tried it with ' ' but that doesn't work:(

How do I create the message without the line breaks?

Thanks for your help!

$("#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>

score 0 · Accepted Answer · answered Jan 22 '20 at 09:59

Try to add width: 100% to the label element. I checked it and updated codebase below.

$("#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>

score 0 · Answer 2 · answered Jan 22 '20 at 10:01

0

Try adding white-space: nowrap to your css and target the ::after pseudo-element of the label.

https://jsfiddle.net/jvko4wdq/

Alternatively, you may also set the label width as 100% with CSS.

answered Jan 22 '20 at 10:01

artikandri

143
2
10

score 0 · Answer 3 · answered Jan 22 '20 at 10:02

0

Set 100% width to element, thats it!

<label data-error="" data-success="OK" for="registerPass" style='width: 100%'>Passwort</label>

answered Jan 22 '20 at 10:02

Harion

225
1
8

fill HTML label with data attribute without line break

3 Answers3