Entry
On form validation I would like to display a message next to the not validated field instead of using an alert. Is that possible?
On form validation I would like to display a message next to the not validated field instead of using an alert. Is that possible?
Apr 2nd, 2000 05:28
Martin Honnen,
It is easy with IE4+ and NN6 where full DOM acccess allows the dynamic
insertion and deletion of such correction messages into the document.
With NN4 all you can do is position a layer with the correction message
where it is difficult to position the layer at the right place. The
following is an attempt to solve that problem:
<HTML>
<HEAD>
<STYLE>
#msgNN4 { position: absolute; }
.msg {
background-color: red;
color: white;
font-size: 16pt;
}
.measurable { position: relative; }
</STYLE>
<SCRIPT>
function removeMessage() {
if (document.all) {
if (document.all.domMsg)
document.all.domMsg.outerHTML = '';
}
else if (document.getElementById) {
var msg = document.getElementById('domMsg');
if (msg)
msg.parentNode.removeChild(msg);
}
else if (document.layers) {
document.msgNN4.visibility = 'hide';
}
}
function insertMessage (element, message, index) {
removeMessage();
var html = '';
if (document.layers) {
html += '<SPAN CLASS="msg">' + message + '<\/SPAN>';
var left =
document.formContainer.pageX +
document.formContainer.clip.width;
var top =
document.formContainer.pageY +
28 * index;
document.msgNN4.left = left;
document.msgNN4.top = top;
document.msgNN4.document.open();
document.msgNN4.document.write(html);
document.msgNN4.document.close();
document.msgNN4.visibility = 'show';
}
else if (document.all) {
html = '<SPAN ID="domMsg" CLASS="msg">' + message + '<\/SPAN>';
element.insertAdjacentHTML('afterEnd', html);
}
else if (document.getElementById) {
var parent = element.parentNode;
var span = document.createElement('SPAN');
span.id = 'domMsg';
span.className = 'msg';
span.appendChild(document.createTextNode(message));
parent.insertBefore(span, element.nextSibling);
}
}
function validateForm (form) {
removeMessage();
for (var e = 0; e < form.elements.length; e++) {
var el = form.elements[e];
if ((el.type.toLowerCase() == 'text'
|| el.type.toLowerCase() == 'textarea'
|| el.type.toLowerCase() == 'password'
|| el.type.toLowerCase() == 'file')
&& el.value == '') {
insertMessage(el, 'Please insert a value into this field!', e);
el.focus();
return false;
}
else if (el.type.toLowerCase().indexOf('select') != -1
&& el.selectedIndex == -1) {
insertMessage(el, 'Please select at least one element!', e);
el.focus();
return false;
}
else if (el.type.toLowerCase() == 'radio') {
var rgb = el.form[el.name];
if (!rgb.length && !rgb.checked) {
insertMessage (el, 'Please check radio button!', e);
el.focus();
return false;
}
else {
var checked = false;
for (var b = 0; b < rgb.length; b++)
if ((checked = rgb[b].checked))
break;
if (!checked) {
insertMessage (el, 'Please check a radio button!', e);
el.focus();
return false;
}
}
}
}
return true;
}
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="formContainer" CLASS="measurable">
<FORM NAME="formName"
ONSUBMIT="return validateForm(this);"
>
<TABLE CELLSPACING="0" CELLPADDING="0">
<TR>
<TD HEIGHT="25">
<INPUT TYPE="text" NAME="aField">
</TD>
</TR>
<TR>
<TD HEIGHT="25">
<INPUT TYPE="radio" NAME="aRadioGroup" VALUE="Kibo">
</TD>
</TR>
<TR>
<TD HEIGHT="25">
<INPUT TYPE="radio" NAME="aRadioGroup" VALUE="Xibo">
</TD>
</TR>
<TR>
<TD HEIGHT="25">
<INPUT TYPE="radio" NAME="aRadioGroup" VALUE="Maho">
</TD>
</TR>
<TR>
<TD HEIGHT="25">
<INPUT TYPE="password" NAME="aPassword">
</TD>
</TR>
<TR>
<TD HEIGHT="25">
<INPUT TYPE="file" NAME="fileName">
</TD>
</TR>
<TR>
<TD HEIGHT="25">
<INPUT TYPE="submit">
</TD>
</TR>
</TABLE>
</FORM>
</DIV>
<SPAN ID="msgNN4"></SPAN>
</BODY>
</HTML>
As the IE4+ and NN6 solution is rather easy and gets a little bit lost
in the code above here is the pure IE4+/NN6 solution:
<HTML>
<HEAD>
<STYLE>
.msg {
background-color: red;
color: white;
font-size: 16pt;
}
</STYLE>
<SCRIPT>
function removeMessage() {
if (document.all) {
var msg = document.all.msg;
if (msg)
msg.outerHTML = '';
}
else if (document.getElementById) {
var msg = document.getElementById('msg');
if (msg)
msg.parentNode.removeChild(msg);
}
}
function insertMessage (element, message) {
removeMessage();
if (document.all) {
var html = '';
html += '<SPAN ID="msg" CLASS="msg">' + message + '<\/SPAN>';
element.insertAdjacentHTML('afterEnd', html);
}
else if (document.getElementById) {
var parent = element.parentNode;
var span = document.createElement('SPAN');
span.id = 'msg';
span.className = 'msg';
span.appendChild(document.createTextNode(message));
parent.insertBefore(span, element.nextSibling);
}
}
function validateForm (form) {
removeMessage();
for (var e = 0; e < form.elements.length; e++) {
var el = form.elements[e];
if ((el.type.toLowerCase() == 'text'
|| el.type.toLowerCase() == 'textarea'
|| el.type.toLowerCase() == 'password')
&& el.value == '') {
insertMessage(el, 'Please insert a value into this field!');
el.focus();
return false;
}
else if (el.type.toLowerCase().indexOf('select') != -1
&& el.selectedIndex == -1) {
insertMessage(el, 'Please select at least one element!');
el.focus();
return false;
}
}
return true;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formName"
ONSUBMIT="return validateForm(this);"
>
<INPUT TYPE="text" NAME="aField">
<BR>
<TEXTAREA NAME="aTextArea" ROWS="5" COLS="20"></TEXTAREA>
<BR>
<INPUT TYPE="password" NAME="aPassword">
<BR>
<SELECT NAME="aSelect" TYPE="multiple" SIZE="2">
<OPTION>JavaScript.FAQTs.com
<OPTION>Python.FAQTs.com
</SELECT>
<BR>
<INPUT TYPE="submit">
</FORM>
</BODY>
</HTML>
