Get 2025 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Password Meter and Form Validator


Hello, there are three password meters on a form, these data are combined with the form validator, but the inputs with the password meter are directly marked as valid, but the inputs are empty. How can I solve this problem?

<img src="https://i.ibb.co/x5KpgS4/Ekran-g-r-nt-s-2024-07-17-024559.png" />
<img src="https://i.ibb.co/bbtsrvX/Ekran-g-r-nt-s-2024-07-17-024853.png" />
<img src="https://i.ibb.co/LkJm7wY/Ekran-g-r-nt-s-2024-07-17-024949.png" />


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 (8)


Hi,

Can you try to use the "validatePassword" function similar to the original template example? You are using the "input" variable from the callback. Try to use a global input DOM object instead for each password input validation.

Regards.



Hello, I tried "validate Password" but it didn't work, but when I added false under the if condition in the callback section, the problem was solved. However, when we left the text field empty and pressed the send button, it gave the error "Please enter valid password" and "The password confirm is required" directly, normally it only gave "The password confirm is required", if there was only one passwordMeter.


callback: {
message: "Please enter valid password",
callback: function (input) {
if (input.value.length > 0) {
return (passwordMeterNewPassword.getScore() > 50);
}
return false;
}
}

<img src="https://i.ibb.co/DW7FHbY/Ekran-g-r-nt-s-2024-07-21-014118.png" />



Hi,

Can you try to below conditions for callback? This allows to pass the empty input case so it will be caught by the mandatory rule only.


if (input.value.length > 0) {
return (passwordMeterNewPassword.getScore() > 50);
} else if (input.value.length === 0) {
return true;
} else {
return false;
}



Hi,
My problem has been resolved, thank you very much.



Hi happy,

Glad to hear that. All the best with your projects!

Regards


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.

Hi,

Can you please provide us with your JS code for the validation via gist.github.com?
Also you can check https://formvalidation.io/guide/ for further info on usage of the validation plugin.

Regards



Hello, I shared my test code below. When I remove the callback: sections on the validator, it gets stuck in the validator when it is empty, but if there is a callback section, it passes through the validator even if it is empty.

https://gist.github.com/mirarus/7dfe09b585685663a87ac40b5c1a719a


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  :(