多个表单中的Jquery验证错误
Jquery validation error in multiple forms
我在同一个页面中有两个表单。jquery。验证插件正在动态加载。由于它是动态加载的,因此在用户单击提交按钮时创建验证规则。验证似乎在第一个表单(表单id = form
)上工作得很好,但在第二个表单(表单id = #form1
)上不起作用。
我得到以下错误:this[0] is undefined
。这个问题有一些解决办法。但是解决方案不工作,因为我的脚本是动态加载的。
另外,大部分的脚本是纯javascript,因为我已经提供了支持几乎所有的浏览器,我没有控制表单元素的名称。如何进行第二表单验证?谢谢。
<form id="form">
<input type="text" name="Please%20provide%20name." />
<input type="text" name="Please%20provide%20email." />
<input type="text" name="%50%6C%65%61%73%65%20%70%72%6F%76%69%64%65%20%70%68%6F%6E%65%20%6E%75%6D%62%65%72%2E" data-parsley-required />
<input type="submit" value="Submit" />
</form>
<form id="form1">
<input type="text" name="name" />
<input type="text" name="email" />
<input type="text" name="phone" />
<input type="submit" value="Submit" />
</form>
"use strict";
document.addEventListener("DOMContentLoaded", function() {
// on load
var forms_count = document.forms.length,
i = 0;
// find all forms in the page
for (i; i < forms_count; i++) {
// for each form
var form = document.forms[i];
if (form.addEventListener) {
// add submit handler to validate
form.addEventListener("submit", validateForm, false); //Modern browsers
} else if (form.attachEvent) {
form.attachEvent('onsubmit', validateForm); //Old IE < 9
}
}
// add scripts
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js");
document.head.appendChild(script);
// add validation rules
validationClasses();
});
function validationClasses() {
var forms_count = document.forms.length,
i = 0;
// find all forms in the page
for (i; i < forms_count; i++) {
// for each form
var form = document.forms[i];
// get form elements
var elements = document.getElementById(form.id).elements;
for (var element of elements) {
// for each element, check name field and add appropriate validation class.
var decode_name = decodeURIComponent(element.name);
if (decode_name.toLowerCase().match(/(name|first name)/)) {
// matching for name field.
element.className += " valid_name";
}
if (decode_name.toLowerCase().match(/(email|email address)/)) {
// matching for email field.
element.className += " valid_email";
}
if (decode_name.toLowerCase().match(/(phone|phone number)/)) {
// matching for phone field.
element.className += " valid_phone";
}
}
}
}
function validationJQRules() {
// custom rules
$.validator.addMethod("mobilenumber", function(value, element) {
return this.optional(element) || /^[0-9-+'s]+$/.test(value);
}, "Invalid Number");
// Define validate form rules in jquery validate
jQuery.validator.addClassRules("valid_name", {
required: true,
});
jQuery.validator.addClassRules("valid_email", {
required: true,
email: true
});
jQuery.validator.addClassRules("valid_phone", {
required: true,
mobilenumber: true
});
}
function validateForm(event) {
validationJQRules();
var form = this,
valid = false;
if (!valid) {
// stop further execution of the event if not valid.
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
} else {
console.log("proceed with form submit.");
}
console.log(form.id);
$(form.id).valid();
console.log($(form.id).valid());
};
同样,对于使用注入的验证脚本执行验证的任何其他替代方法,我们都非常赞赏。
$(form.id).valid()可能存在问题。使用
$("#" + form.id).valid();
console.log($("#" + form.id).valid());
相关文章:
- 如何使用jQuery验证引擎验证组
- jQuery:使用“jQuery验证”后无法提交表单's远程验证
- 一个jquery验证器方法,它不接受纯数字或纯特殊字符,但接受上面是否有字母
- jQuery验证器添加方法未定义
- jQuery验证插件submitHandler Ajax
- 使用jquery验证函数不适用于select元素
- 动态jQuery验证
- 如果使用jQuery验证器插件找到单选按钮,则将不同的addMethod应用于字段
- 使用jquery验证信用卡
- 未使用jQuery验证器选中Css样式复选框时
- 自定义jquery验证器
- Jquery验证消息更改(自定义消息集)
- 时间日志的javascript/jquery验证(5小时3米)
- jQuery 验证正在复制 else 语句 |验证完成后,不会打印值
- 将动态验证文本添加到自定义jQuery验证规则中
- Jquery 验证插件 - 字段仍然产生错误
- 验证字段名称 添加 与 使用 jquery 验证
- JQUERY 验证 - 序列化选择和复选框
- jQuery 验证 - 调用某些元素的 .valid() 方法不会清除错误
- 带有jquery验证问题的php表单