如何在javascript中的文本框旁边显示错误消息？

Question

I am new to Javascript. So I had a doubt for the following function, how to display the error message next to text box? right now it is showing a alert message, but I need to change the alert message and need to display it next to textbox?

function AllowLock(){
    if (!locker.lock.value.match(/[a-zA-Z]$/) && locker.lock.value !="") {
        locker.lock.value="";
        alert("Please Enter only valid lock");
    }
    if(locker.lock.value.length > 5)
        alert("max length exceeded");
    } 
}

Answer 1

you must have any container for that message, so you can create element and then append your message to that, something like this, with jquery

 <input type="text" id="kuku"></input>

$('#kuku').after('<div></div>').html("your message");

Answer 2

You can create a span element next to your textbox

<input type="text" /><span id="msg"></span>

and put your message.

document.getElementById("msg").innerHTML = "your message";

Answer 3

Expanding on anna's answer here is a example usage.. this code is the called on the on click of my 'continue' button. Removes all existing error messages at start so they dont stack up etc.

<input id="userZip" type="number">
<input id="userName" type="text">
$('.errorText').remove();
userZip.style.border = "1px solid black";
userName.style.border = "1px solid black";
if(userName.value.length >= 3){
  if(userZip.value.length == 5){
    //success
    loginPanel.style.display = "none";
    location.href='#appNavigation/'+'mapNav';
  } else {
    userZip.style.border = "1px solid red";
    $('#userZip').after('<div class="errorText">Zipcode required. 5 numbers</div>');
  }
} else {
  userName.style.border = "1px solid red";
  $('#userName').after('<div class="errorText">Username required. 3 or more characters</div>');
}