Javascript自定义验证
Javascript custom validation
我正在编写一个自定义的javascript验证脚本,通过该脚本,我遍历名为"toggle"的div中的所有输入元素,并选择每个具有名为"required"的类的元素。如果元素的值是空字符串(空),则我需要创建包含错误消息的标签,并将它们放在文本框旁边。
这是代码:
function clientErrMsgs() {
var container = document.getElementById("toggle");
var inputArray = container.getElementsByTagName("input");
for (var i = 0; i < inputArray.length; i++) {
alert("");
if (inputArray[i].getAttribute("class") == "required" && inputArray[i].value == "") {
var errmsg = inputArray[i].getAttribute("data-errormessage");
var labelErr = document.CreateElement('label');
labelErr.id = "ErrMsg" + i;
labelErr.value = errmsg;
var parent = inputArray[i].parentNode;
parent.appendChild(labelErr);
}
}
}
程序执行良好(用alert()测试),直到出现以下行:
var labelErr = document.CreateElement('label');
问题出在哪里?
您可以使用asp.net自定义验证器来完成此
我给你举一个例子,如何做到这一点。。。。
<asp:CustomValidator ID="CustomValidator1" runat="server"
ErrorMessage="Sms length is exceeding over 160."
ClientValidationFunction="validateLength" ControlToValidate="txtSmsMessage"
SetFocusOnError="True" ValidationGroup="add">*</asp:CustomValidator>
<script language="javascript" type="text/javascript">
function validateLength(oSrc, args)
{
args.IsValid = (args.Value.length < 160);
}
</script>
我建议你试试这个。。。
我使用了
http://jsfiddle.net/ahallicks/kxPeN/2/
标签没有值属性
其document.createElement
不是document.CreateElement
MDC链接:document.createElement
更新:您应该访问label
的innerHTML
,而不是value
片段
var labelErr = document.createElement('label');
labelErr.id = "ErrMsg" + i;
labelErr.innerHTML= errmsg;
var parent = inputArray[i].parentNode;
parent.appendChild(labelErr);
这不是对您问题的直接回答,但您的上级会选择不同的预构建验证方法吗?我偏爱FlowPlayers基于jQuery的验证器。设置非常简单:
$("#myform").validator();
我过去写过几个验证框架。我终于厌倦了重新发明轮子。
我可以建议一下吗:
function clientErrMsgs() {
var container = document.getElementById("toggle");
var inputArray = container.getElementsByTagName("input");
for (var inp, i=0, n=inputArray.length; i<n; i++) {
inp = inputArray[i];
if (inp.getAttribute("class") === "required") {
var errMsg = container.getElementById("ErrMsg"+i);
if (!errMsg) {
errMsg = document.createElement('span');
errMsg.id = "ErrMsg" + i;
errMsg.innerHTML= inp.getAttribute("data-errormessage");
inp.parentNode.appendChild(errMsg);
}
errMsg.style.display= (inp.value === "")?"":"none"
}
}
}
相关文章:
- jQuery自定义验证比较多个输入的序列
- 自定义表单验证和提交
- jQuery工具验证器自定义效果-添加&消除影响
- 在 AngularJs 中验证自定义指令(我想让它成为必需的)
- jQuery验证自定义错误
- jQuery验证自定义方法规则和具有动态名称的消息
- 有没有一种更优雅、可扩展的方式可以向JQuery验证自定义方法添加多个条件
- 简单的jquery验证-自定义位置错误消息放置
- jQuery验证插件:验证自定义日期格式
- jQuery验证自定义验证器不会被触发,即使名称是正确的
- 无法使用淘汰验证验证自定义组
- HTML5表单验证自定义
- JS验证自定义规则来检查数组是否为空
- 使用jQuery表单验证自定义Ajax请求
- 当返回false时,JQuery验证自定义方法不显示
- 未定义不是函数:单元测试护照身份验证自定义回调
- 不同元素的Jquery验证自定义消息动态变化
- 添加文件之前进行验证(自定义)
- 如何使用 jQuery 验证插件验证自定义 JavaScript 对象
- 淘汰验证自定义消息模板的问题