0
213
ViewsHow to alert under input text with conditions?
want to divided the alert. So when value is empty or null, the alert is nama pengguna must inputed. And if value is less then 5, the alert is min 5 characters.
For the style is only like it (red text, under input text). I mean not use javascript alert.
This is my code:
function checkLength() {
var textbox = document.getElementById("username");
if(textbox.value.length <= 5) {
alert("min 5 characters");
}
else if(textbox.value.length == 0){
alert("nama pengguna must inputed")
}
}<div class="form-group required2">
<label class="control-label visible-ie8 visible-ie9">Nama Pengguna</label>
<div class="input-icon">
<i class="fa fa-user"></i>
<input id="username" class="form-control placeholder-no-fix" pattern=".{5,}" type="text" autocomplete="off" placeholder="Nama Pengguna" name="username" onchange="checkLength()" required title="nama pengguna must inputed (min 5 characters)">
</div>
</div>Thanks.
3 answers
Answer question0
You could create a p tag and append those errors as suggested i.e. characters length should be less then 5, as below, I have even made few correction in conditions.
var textbox = document.getElementById("username");
var pr = document.createElement("p");
function nm(){
if(textbox.value.length >= 1 && textbox.value.length <= 5){
pr.textContent = "min 5 characters";
document.body.appendChild(pr);
}
else if(textbox.value.length === 0){
pr.textContent = "nama pengguna must inputed";
document.body.appendChild(pr);
}
}
textbox.addEventListener("blur",nm);p{
color:red;
}<div class="form-group required2">
<label class="control-label visible-ie8 visible-ie9">Nama Pengguna</label>
<div class="input-icon">
<i class="fa fa-user"></i>
<input id="username" class="form-control placeholder-no-fix" pattern=".{5,}" type="text" autocomplete="off" placeholder="Nama Pengguna" name="username" required title="nama pengguna must inputed (min 5 characters)" />
</div>
</div>0
If you want to change your message accordingly, you will be battling against HTML5 validation, but that won’t be too big a problem.
What you need to do is to check the value when the data has changed.
Put the following into your stattup code:
document.querySelector('input#username').onchange=function() {
checkLength();
}
By startup code, I mean whatever you use to start your script. Tuypically it is something like:
document.addEventListener('DOMContentLoad',init,false);
function init() {
}
or, for older browsers,
window.onload=init;
0
If you want convert alert into simple text message then follow the code below.
HTML
<div class="form-group required2">
<label class="control-label visible-ie8 visible-ie9">Nama Pengguna</label>
<div class="input-icon">
<i class="fa fa-user"></i>
<input id="username" class="form-control placeholder-no-fix" pattern=".{5,}" type="text" autocomplete="off" placeholder="Nama Pengguna" name="username" required title="nama pengguna must inputed (min 5 characters)" />
<span class="username_error" class="error"></span>
</div>
</div>
Javascript
<script>
function checkLength(){
var textbox = document.getElementById("username");
if(textbox.value.length <= 5){
document.getElementById('username_error').innerHTML = "min 5 characters";
}
else(textbox.value.length == 0){
document.getElementById('username_error').innerHTML = "nama pengguna must inputed";
}
}
</script>
CSS
<style>
.error{
color:"red";
}
</style>