Javascript在每个有问题的控件上输出一条错误消息
Javascript output an error message on each offending control
我必须以各种方式验证这些字段。我真正遇到的问题是,如果每个字段为空,我必须为其输出一条错误消息。每个为null的控件旁边都应该有一条错误消息。需要同时显示所有错误消息。因此,如果有多个字段为空,则当用户单击验证按钮时,需要显示所有错误消息。
<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的总体知识已经生疏了几年。
在这一点上,即使是模糊的例子也会有所帮助。
下面是一些代码:
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/
相关文章:
- 在地图上画一条路线
- 在d3中拖动一条线
- 我确实有一个表单,如果用户输入了输入,它应该检查否定或空的输入框,并抛出一条警告消息
- 我正在创建一个聊天,但每次我发送消息时,它都不会让我再发送另一条消息,就像表格一样;不起作用
- 当我的条件为true时,显示一条弹出消息
- 如何在javascript中的if或else块中运行一条jsp语句
- 加载页面每10秒显示一条不同的消息
- 更改路线时,在react.js中得到一条非常crypric的消息
- 当用户单击保存按钮时,标签会显示一条消息
- 仅显示一条通用消息,而不是每个输入显示一条
- 在检索到最后一条记录后从 PostgreSQL 中提取记录
- 有没有一条清晰的路径,我可以实现一个在 ScalaJS + React 中广泛使用上下文的 React 组件
- 如果用户的浏览器早于以下版本,则显示一条消息:IE 10、Firefox 39、Chrome 39、Opera 8
- 子网格:限制用户仅选择一条记录
- 删除高图中的第一条和最后一条网格线
- 我的代码给了我一条错误消息:GetElementById()为null或不是对象
- 我可以用jQuery画一条线吗
- Highcharts为BoxPlot图表添加了一条Mean线
- 当最后一条消息溢出时删除它
- Javascript在每个有问题的控件上输出一条错误消息