how to display error message next to textbox in 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");
    } 
}

U should create a custom alert that u then can position with CSS next to your textbox. An approach is have a hidden div in your HTML and make it visible when the errors occurs — DarkBee
– DarkBee, Commented Sep 23, 2013 at 8:05

Anna Gabrielyan · Accepted Answer · 2013-09-23 11:59:05Z

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");

answered Sep 23, 2013 at 11:59

Anna Gabrielyan

2,1704 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ashok kumar Over a year ago

can u able to do it with table?

Anna Gabrielyan Over a year ago

what do you mean with table ?

Anna Gabrielyan Over a year ago

u mean append table instead of div ? if yes, actually u can append any element with after function. u mean this $('#kuku').after('<table><tr><td></td></tr></table>').html("your message"); ?

Anna Gabrielyan Over a year ago

@ashokkumar can put more clear html code please, i cant understand what u did, in jsFiddle, put your html code in html part, css in css part, and don't forget to format it

Ashok kumar Over a year ago

yeah i got footer at the bottom,but how to align that header to the top using table tag?

Community · Accepted Answer · 2015-04-30 13:00:09Z

0

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";

edited Apr 30, 2015 at 13:00

CommunityBot

11 silver badge

answered Sep 23, 2013 at 8:15

andorx

3491 silver badge6 bronze badges

Comments

matthew martin · Accepted Answer · 2021-07-30 02:02:41Z

0

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>');
}

edited Jul 30, 2021 at 2:02

answered Jul 29, 2021 at 3:21

matthew martin

113 bronze badges

1 Comment

Timothy Alexis Vass Over a year ago

Welcome to Stackoverflow. Please read how to write a good answer.

Collectives™ on Stack Overflow

how to display error message next to textbox in javascript?

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related