How to show message beside text box

[hon123456]

Dear all,

I have a textbox for user input, I want to show message beside
the textbox when the user input non-numberic letter. I know how to use
isNaN. But I don't know how to show message beside the textbox. Please
suggest javascript that can show message "Please enter numeric value"
beside the text box when the user enter non-numeric value.

<input type="text" size="17" name="OS_No">

Thanks.

 

[RobG]

Dear all,

I have a textbox for user input, I want to show message beside
the textbox when the user input non-numberic letter. I know how to use
isNaN. But I don't know how to show message beside the textbox. Please
suggest javascript that can show message "Please enter numeric value"
beside the text box when the user enter non-numeric value.

<input type="text" size="17" name="OS_No">

You may want something like:

<script type="text/javascript">

function checkInput(el) {
var msg = '';
var o;
var re = /^\d*$/;
var value = el.value

if (el.name &&
document.getElementById &&
(o = document.getElementById(el.name + '_err'))) {

if (!re.test(value)) {
msg = 'Only numbers please&hellip;'
}

o.innerHTML = msg;
}

return;
}
</script>

<input type="text" size="17" name="OS_No"
onkeyup="checkInput(this);"><span id="OS_No_err"
style="color:red; font-weight: bold;"></span>

 

[hon123456]

You may want something like:

<script type="text/javascript">

function checkInput(el) {
var msg = '';
var o;
var re = /^\d*$/;
var value = el.value

if (el.name &&
document.getElementById &&
(o = document.getElementById(el.name + '_err'))) {

if (!re.test(value)) {
msg = 'Only numbers please&hellip;'
}

o.innerHTML = msg;
}

return;
}
</script>

<input type="text" size="17" name="OS_No"
onkeyup="checkInput(this);"><span id="OS_No_err"
style="color:red; font-weight: bold;"></span>

Thanks Rob,

Because I am new to Javascript, I am not quite understand what is
the usage of the following if statement

if (el.name &&
document.getElementById &&
(o = document.getElementById(el.name + '_err')))

When the el.name will return true, and what does el.name check for.
And what is the meaning of document.getElementById and
(o = document.getElementById(el.name + '_err')))

Thanks.

 

[RobG]

Thanks Rob,

Because I am new to Javascript, I am not quite understand what is
the usage of the following if statement

The overall strategy is to test for things that are expected or
required so as to not cause errors. Where that strategy involves
testing expected built-in and host features, it is called feature
detection, you can read more here:

<URL: http://www.jibbering.com/faq/faq_notes/not_browser_detect.html#bdFD

if (el.name &&
document.getElementById &&
(o = document.getElementById(el.name + '_err')))

The && (AND) operator can be used to replace a sequence of nested if
statements. The above is the same as:

if (el.name) {

if (document.getElementById) {
o = document.getElementById(el.name + '_err');

if (o) {
...
}
}
}

When the el.name will return true, and what does el.name check for.

It checks that el.name returns a value that converts to true in the
conditional part of the if statement, i.e. that the element has a
name.

And what is the meaning of document.getElementById and

That checks that the document object (which I've assumed exists) has a
property named getElementById and that it returns a value that
converts to true as above. It is a reasonable (though not thorough)
test that the host environment supports the W3C DOM 2 Core
document.getElementById method.

You can search the archives here for recent (last 3 months) threads on
feature detection to see how far this concept can be taken[1]. The
above is probably the simplest that is reasonable to use in this
example, there are much more thorough methods.

(o = document.getElementById(el.name + '_err')))

That calls document.getElementById(...) and assigns the result to o,
which is then used in the conditional part of the if statement to see
if it converts to true, i.e. it checks that o has been assigned a
reference to an element (hopefully the one we're after). If an
element with a matching ID was not found, o would be null and convert
to false.

1. Here's a link to get you started:
<URL:
http://groups.google.com.au/group/c...st&q=code+worth+recommending#4cbeb43d1c6ceecc

 

[hon123456]

Thanks Rob,

So many thanks to your explanation. I have two more question
for the
above code. The regular expression in the above code does not allow
dot ".".
But I need to allow the user to input "." because the number may be
decimal.
How can I change the regular expression to allow user input ".".

The another question is if the input is blank. I want to show message
"Quantity cannot be blank" Beside the Box and let the focus stay in
the
input box.

Thanks.

 

[Thomas 'PointedEars' Lahn]

That calls document.getElementById(...) and assigns the result to o,
which is then used in the conditional part of the if statement to see
if it converts to true, i.e. it checks that o has been assigned a
reference to an element (hopefully the one we're after). If an
element with a matching ID was not found, o would be null and convert
to false.

Actually, there has been a (pleasant) surprise about this (at least to me)
here a few days ago. According to specification and implementations, the
value of the left-hand operand (here: o) after the assignment is _not_
relevant for the result of the AssignmentExpression; instead the value of
the right-hand operand before the assignment (here: the return value of
document.getElementById(...)) is.


PointedEars