Validate two form in the same page
Hello,
I use Metronic with WordPress and Bootstrap5.
I a page I have two form.
For this I make a new file mycustom.js.
In this file I put the code for validation form, but in frontend Chrome see me: Cannot read properties of null (reading 'classList') in plugin.bundle.js.
Could it depend on the constant FORM which is identical on all the JS that check the validation?
-----
const form = document.getElementById('password_formvalidation');
var validator = FormValidation.formValidation(
form, {
-----
To try and fix this, I've encapsulated all the validation script in
-----
(function () {
....
})()
-----
But nothing, it doesn't work.
Suggestions?
Replies (7)
I apologize, maybe I haven't explained myself.
I have a file .. my_custom_js.js
Inside that file are all the custom scripts including graphics and form validators.
PAGES
Edit Profile: Contains two separate modules.
Edit Account - Contains two separate modules.
Each module has a different ID, so in the JS file I wrote:
----
"use strict";
var EditForm1 = function () {
var form;
var submitButton;
var validation;
var initValidation = function () {
validation = FormValidation.formValidation(
form, {
fields: {
.....
},
plugins: {
.....
},
}
);
}
var handleForm = function () {
....
}
return {
init: function () {
form = document.getElementById('ID_form1');
submitButton = form.querySelector('#ID_form1_submit');
initValidation();
}
}
}();
KTUtil.onDOMContentLoaded(function () {
EditForm1.init();
});
----
----
"use strict";
var EditForm2 = function () {
var form;
var submitButton;
var validation;
var initValidation = function () {
validation = FormValidation.formValidation(
form, {
fields: {
.....
},
plugins: {
.....
},
}
);
}
var handleForm = function () {
....
}
return {
init: function () {
form = document.getElementById('ID_form2');
submitButton = form.querySelector('#ID_form2_submit');
initValidation();
}
}
}();
KTUtil.onDOMContentLoaded(function () {
EditForm2.init();
});
----
Different IDs for each form. It works but as the file when loaded it executes KTUtil.onDOMContentLoaded (function () {... FUNCTION NAME,
when it does not find the form on the page, it generates error.
Hi,
You can add if statement to check if the form element exists in the page. If the form does not exist you can exit the clause.
if (!form) {
return;
}Regards.
Sorry but I'm not a senior developer ...
Where I can put this IF?
You can put it for all form references:
form = document.getElementById("ID_form2");
if (!form) {
return;
}Regards.
Perfect!!
Many thanks and sorry for my low skill.
I found a solution with your code here: /src/js/account/settings/profile-details-js but the function is activated with the following code:
----
KTUtil.onDOMContentLoaded(function() {
KTAccountSettingsProfileDetails.init();
});
----
Now, copying this code, adapting it to other forms and inserting all the codes in the same file, the validation works but, obviously, onDOMContentLoaded of the forms that are not present on the page, generates an error.
Is there a way to change the init of the function?
Hi,
The KTAccountSettingsProfileDetails works for forms that the profile page uses.
You can refer to the form IDs and exclude unrequired form codes.
I would suggest revising KTAccountSettingsProfileDetails and reusing its related part in your own scripts. KTAccountSettingsProfileDetails does not need to be included.
Regards
