jquery多种形式的验证错误(Jquery validation error in multiple forms)

我在同一页面中有两种形式。 jquery.validate插件正在动态加载。由于它是动态加载的，所以当用户点击提交按钮时会创建验证规则。验证似乎在第一个窗体（form id = form ）上工作正常，但在第二个窗体（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()); };

另外，非常感谢任何其他用于使用注入的验证脚本执行验证的备用方法。

I have two forms in the same page. jquery.validate plugin is being loaded dynamically. Since it is loaded dynamically, validation rules are created when user clicks on submit button. The validation seems to be working fine on the first form ( form id = form ) but doesn't work on the second one ( form id = #form1).

I'm getting the following error: this[0] is undefined. This question has some solutions. But the solutions doesn't work as my script is being loaded dynamically.

Also, most of the script is plain javascript as i have provide support to almost all browsers and i do not have control over form elements names. How to proceed with second form validation? Thanks.

<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()); };

Also, any other alternate method for performing validation with injected validation scripts is very much appreciated.