Sp0T Sp0T - 25 days ago 13
Javascript Question

Jquery validation error in multiple forms

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.

Answer

$(form.id).valid() may be a problem. Use

$("#" + form.id).valid();
console.log($("#" + form.id).valid());