在Javascript中，如何更改警报窗口以在输入框旁边显示该警报

Question

My friend and I are making a data validation program. If you enter in data that the program will not accept (example such as putting numbers in a name field) you get a windows alert telling you that is not valid. We decided we want to change this so that instead of a windows alert there will be an empty table cell to the right of each of the form elements that displays that your data is not valid. How could I change this? Attaching code below.

function fNameValidation()
{
if (document.forms[0].fName.value.length==0)                //First name data validation
{                                                           //check for any entry
alert('Please enter your first name.');
document.forms[0].fName.focus();
return;
}

Answer 1

在具有唯一ID的输入字段旁边放置一个span元素，然后可以将Text插入该特定字段：

document.getElementById('firstNameError').innerHTML = "Please enter your first name.";

Answer 2

Easiest aproach is to set id of this cell:

<td id="nameErrorCell">
    (...)
</td>

and than in your javascript:

var cell = document.getElementById('nameErrorCell');
cell.innerHTML="error message";

Answer 3

You can also traverse DOM tree up one level to <td> element, then to its sibling and alter its innerHTML with your error message.

document.forms[0].fName.parentNode.nextSibling.innerHTML = 'Please enter your first name.');

If there are elements between <input> and <td> , add more .parentNode .