Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

BUG? KTSigninGeneral.init(): Leads to plugins.bundle.js:26422 Uncaught TypeError: Cannot read properties of null (reading 'classList')


Hi Sean and Team

I receive an uncaught error which is traced from plugins to sign-in validator script -> KTSigninGeneral.init();

Error:
Uncaught TypeError: Cannot read properties of null (reading 'classList')
at plugins.bundle.js:26422:119075
at Array.forEach (<anonymous>)
at s$2 (plugins.bundle.js:26422:119049)
at plugins.bundle.js:26422:119500
at Array.forEach (<anonymous>)
at c (plugins.bundle.js:26422:119472)
at l.install (plugins.bundle.js:26422:126155)
at l.install (plugins.bundle.js:26423:4127)
at l.registerPlugin (plugins.bundle.js:26422:94647)
at plugins.bundle.js:26422:105098
(anonymous)@plugins.bundle.js:26422
s$2@plugins.bundle.js:26422
(anonymous)@plugins.bundle.js:26422
c@plugins.bundle.js:26422
install@plugins.bundle.js:26422
install@plugins.bundle.js:26423
registerPlugin@plugins.bundle.js:26422
(anonymous)@plugins.bundle.js:26422
r@plugins.bundle.js:26422
handleForm@general.js:13
init@general.js:115
(anonymous)@general.js:122



I thought this might be due to failure of the form validator to find fields in my login page.


<input type="email" id="emailId" name="emailId" > //<---id/name

I updated script name

var handleForm = function(e) {
// Init form validation rules. For more info check the FormValidation plugin"s official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
"emailId": { //<----changed this
validators: {
regexp: {
regexp: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
message: "The value is not a valid email address",


But changing this didn't fix the error.

Is this a bug or have I misapplied the script?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Hi,

KTSigninGeneral script refers to the input name as per in the original HTML template should be:


<input type="email" name="email"/>


If you like to change the input name you will need to modify the required code in src/js/custom/authentication/sign-in/general.js

Then recompile your assets folder with Gulp or Webpack.

Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment you will only need the compile assets, no need to install the build tools dependencies there.

Regards.



Hey Sean - yep, I did try this.. I renamed the script input name to match my html.. ie. my [name="emailId"], and I made this update, and received the error.

per initial post:

fields: {
"emailId": { //<--- I changed this
validators: {
regexp: {


I may have missed all the places it needs to change - so I'll have another look.

Cheers! happy



Hi,

Please make sure you have fv-row class for the element that wraps the inputs. Is this class used by the FormValidation plugin as explained here.

if you need any further help please do let us know.

Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(