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>
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>
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.
将 100% 宽度设置为元素,就是这样!
<label data-error="" data-success="OK" for="registerPass" style='width: 100%'>Passwort</label>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.