Javascript 在每个有问题的控件上输出一条错误消息

Question

我必须以各种方式验证这些字段。我真正遇到的麻烦是，如果每个字段为空白，我必须输出一条错误消息。每个为空的控件旁边应该有一条错误消息。所有错误消息都需要同时显示。因此，如果有多个字段为空，则需要在用户单击验证按钮时显示所有错误消息。

<form name="myForm" action="" onsubmit="formValidate()" method="post">
Name: <input type="text" name="name" id="name">
<br>
Email: <input type="text" name="email" id="email">
<br>
Phone: <input type="text" name="area" id="area">-
<input type="text" name="prefix" id="prefix">-
<input type="text" name="suffix" id="suffix">
<br>
Address: <input type="text" name="address" id="address">
<br>
City: <input type="text" name="city" id="city">
State: <select id="state">
        <option value="WI">WI</option>
        <option value="IL">IL</option>
        <option value="MI">MI</option>
    </select>
Zip: <input type="text" name="zip" id="zip">
<br>
<input type="radio" name="sex" value="male" id="gender">Male

<input type="radio" name="sex" value="female" id="gender">Female
<br>
<input type="checkbox" name="courses" value="asp" id="asp">ASP.NET
<br>
<input type="checkbox" name="courses" value="java" id="java">Advanced Java
<br>
<input type="checkbox" name="courses" value="php" id="php">PHP
<br>
<input type="submit" value="Validate">
</form>

我试过用 appendChild 添加我自己的输出，但我无法让它工作。我不能为此使用 innerHTML，而且我的整体 javascript 知识已经生疏了几年。

在这一点上，即使是模糊的例子也会有所帮助。

Answer 1

这是一些代码：

HTML

<form name="myForm" action="" method="post">
    Name: <input type="text" name="name" id="name"/><span id="nameError" class="error"></span>
    <br/>
    Email: <input type="text" name="email" id="email"/><span id="emailError" class="error"></span>
    <br/>
    Phone: <input type="text" name="area" id="area"/>-
    <input type="text" name="prefix" id="prefix"/>-
    <input type="text" name="suffix" id="suffix"/><span id="phoneError" class="error"></span>
    <br/>
    Address: <input type="text" name="address" id="address"/><span id="addressError" class="error"></span>
    <br/>
    City: <input type="text" name="city" id="city"/><span id="cityError" class="error"></span>
    <br/>
    State: <select id="state">
        <option value="WI">WI</option>
        <option value="IL">IL</option>
        <option value="MI">MI</option>
    </select>
    Zip: <input type="text" name="zip" id="zip"/><span id="zipError" class="error"></span>
    <br/>
    <input type="radio" name="sex" value="male" id="gender"/>Male

    <input type="radio" name="sex" value="female" id="gender"/>Female
    <br/>
    <input type="checkbox" name="courses" value="asp" id="asp"/>ASP.NET
    <br/>
    <input type="checkbox" name="courses" value="java" id="java"/>Advanced Java
    <br/>
    <input type="checkbox" name="courses" value="php" id="php"/>PHP
    <br/>
    <input id="validate" type="submit" value="Validate"/>
</form>

CSS

.error {
    color:red;
    font-style:italic;
    font-size:90%;
    padding-left:3px;
}

JavaScript

window.VALIDATE_MAP = {
    'name':'nameError',
    'email':'emailError',
    'area':'phoneError',
    'prefix':'phoneError',
    'suffix':'phoneError',
    'address':'addressError',
    'city':'cityError',
    'zip':'zipError'
};
window.BLANK_ERROR_MESSAGE = 'cannot be blank.';

$('#validate').click(function() {
    var valid = true;
    for (var id in VALIDATE_MAP) {
        if (!VALIDATE_MAP.hasOwnProperty(id)) continue;
        var errorId = VALIDATE_MAP[id];
        var $input = $('#'+id);
        var $error = $('#'+errorId);
        if ($input.val() === '') {
            $error.text(BLANK_ERROR_MESSAGE);
            valid = false;
        } else {
            $error.text('');
        } // end if
    } // end for
    return valid;
});

http://jsfiddle.net/h4cw4hw7/1/

Javascript 在每个有问题的控件上输出一条错误消息

Javascript output an error message on each offending control

javascript

validation

HTML

CSS

JavaScript