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

Form Validator with regex


Hello,
I didn't understand how to use REGEX validation on fields like email, phone, url, vat etc ...

The code I use is the following


"email": {
validators: {
notEmpty: {
message: "e-mail richiesta!"
},
regexp: {
regexp: /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/,
message: "Indirizzo e-mail non valido."
}
}
},

but it does not work.

Can you help me?


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


FYI, my complete function is:

"use strict";
var mscRegister = function () {
var form;
var submitButton;
var validation;
var initValidation = function () {
validation = FormValidation.formValidation(
form, {
fields: {
"user_url": {
validators: {
notEmpty: {
message: "Dominio/URL richiesto!"
}
}
},
"user_login": {
validators: {
notEmpty: {
message: "Username richiesto!"
}
}
},
"first_name": {
validators: {
notEmpty: {
message: "Nome richiesto!"
},
regexp: {
regexp: /^[a-z\s]+$/,
message: "The full name can consist of alphabetical characters and spaces only",
},
}
},
"last_name": {
validators: {
notEmpty: {
message: "Cognome richiesto!"
}
}
},
"email": {
validators: {
notEmpty: {
message: "Indirizzo e-mail richiesto!"
},
emailAddress: {
message: "The value is not a valid email address"
}
}
},
"user_pass": {
validators: {
notEmpty: {
message: "Password richiesta!"
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
submitButton: new FormValidation.plugins.SubmitButton(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: ".fv-row",
eleInvalidClass: "is-invalid",
eleValidClass: "is-valid"
}),
icon: new FormValidation.plugins.Icon({
valid: "fa-light fa-circle-check",
invalid: "fa-light fa-circle-exclamation",
validating: ""
}),
}
}
);
}
var handleForm = function () {
submitButton.addEventListener("click", function (e) {
e.preventDefault();

validation.validate().then(function (status) {
if (status == "Valid") {
submitButton.setAttribute("data-kt-indicator", "on");
submitButton.disabled = true;
setTimeout(function () {
submitButton.removeAttribute("data-kt-indicator");
submitButton.disabled = false;
}, 500);
}
});

});
}

return {
init: function () {
form = document.getElementById("register_authentiform");
if (!form) {
return;
}
submitButton = form.querySelector("#register_authentiform_submit-register");

initValidation();
}
}
}();

KTUtil.onDOMContentLoaded(function () {
mscRegister.init();
});



Hi,

You can check the official documentation of the form validation plugin here.

Regards



Already looked and found nothing.

Also, the function I use is from Metronic and not the plugin, cmq really many thanks for the premium support.



Hi,

You can use any regex rule within the validation by following to the plugin documentation. Please make sure the regex rule is valid then it will work as expected.

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