我本来打算赞成 Bhuvan Rikka 的评论,但在查看了 Wiley 对您的代码的摆弄之后,我认为这类似于同意兴登堡需要一层油漆。
标记、脚本和可用性有几个问题需要引起注意。
- 修复 ID 并“返回 false”以防止表单提交。见 Bhuvan Rikka 的评论
e.returnValue = false
- 关于 ID:使它们有意义。将输入字段名称重命名为 eBookFile、eBookName、eBookPrice、Thumbnail、Description 而不是 realupload_1、p_name、p_price、realupload_2、p_desc。
- 在表单标记中:不需要提交的字段不应该有 ID。同样,文本标签绝不应该是输入文本字段。
- 在这一系列 elseif 中链接验证是一个巨大的可用性问题,使用警报来显示验证错误使问题更加复杂。一次显示所有错误,为了所有神圣的事物,不要使用警报。
- 定制验证很棒,我为你鼓掌。如果您使用 jQuery 并且不想花两个小时拉头发和重新发明轮子,请使用Validate 插件。
我通过以下更改扩展了wirey 的小提琴。
- 清理了 HTML。很多!
- 链接了ASPNETCDN 上的 Validate 插件。
- 使用“defaultInvalid”方法扩展验证插件以处理默认值。
- 该表单现在使用 jQuery 验证插件。为各种表单元素添加了 'required' 和 'defaultInvalid' css 类。
- 添加了验证错误的样式。
尝试一下。请注意,您可以看到所有无效字段,而不是显示第一个无效字段的消息的弹出窗口?
这是清理后的 HTML。
<form id="add_upload" action="/echo/json/" method="post" enctype="multipart/form-data">
<div class="standard-white-row upload-ebook-row">
<!-- The label is no longer an input. Removed ID from label -->
<div class="fakeupload">Select your ebook file…</div>
<input id="eBookFile" type="file" class="realupload required defaultInvalid" />
</div>
<div class="standard-white-row">
<div class="field-ebook-name">
<input id="eBookName" name="eBookName" type="text" value="eBook Name" class="required defaultInvalid" />
</div>
<div class="field-ebook-price">
<input id="eBookPrice" name="eBookPrice" type="text" value="0.00" class="required defaultInvalid" />
</div>
</div>
<div class="standard-white-row upload-preview-img-row">
<!-- The label is no longer an input. Removed ID from label -->
<div class="fakeupload">Select your thumbnail image…</div>
<input id="thumbNail" name="thumbNail" type="file" class="realupload required defaultInvalid" />
</div>
<div class="standard-white-row">
<textarea id="Description" name="Description" cols="" rows="" class="required defaultInvalid">Description…</textarea>
</div>
<div class="standard-white-row standard-white-submit">
<input id="submitButton" type="submit" value="Add ebook" />
</div>
<div class="errorSummary incomplete"></div>
</form>
对于表单验证功能,我们首先在http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js链接到 Validate 插件,然后使用 defaultInvalid 方法扩展 validate。
// Validation extension to invalidate a field if the value is the default.
// Add the 'defaultInvalid' css class to inputs with a default value.
jQuery.validator.addMethod("defaultInvalid", function (value, element) {
return !(element.value == element.defaultValue);
});
第一种验证方法将在无效字段旁边显示验证错误。
第二种(已被注释掉)验证方法将验证错误放在表单下方的摘要中。
$(document).ready(function () {
// Invalid fields will receive the 'errorHilite' css class
// error message will be inline adjacent to the invalid field
$('#add_upload').validate({
keyup: false,
onfocusout: false,
onclick: false,
errorElement: "span",
errorClass: "errorHilite"
});
// Invalid fields will receive the 'errorHilite' css class.
// Error messages are summarized in the element specified by errorLabelContainer.
/*
$('#add_upload').validate({
errorLabelContainer: $(".errorSummary"),
keyup: false,
onfocusout: false,
onclick: false,
errorElement: "div",
errorClass: "errorHilite"
});
*/
});
查看验证 API 参考以获取更多选项。