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

Custom validator or remote validator with ajax request


Hi, I'm implementing a wizard where I need to validate if exist an object in my database before go to the next step, but it doesn't work properly

This is my code:

const existClient = function () {
return {
validate: function (input) {
const value = input.value;
if (value === "") {
return {
valid: true,
};
}
if (value.length > 0) {
$.ajax({
url: "/clientes/findClient",
type: "GET",
data: {
"id": value
},
success: function (data) {
if(data.length >0){
return {
valid: false,
};
}
});
}
return {
valid: true,
};
},
};

validator = FormValidation.formValidation(
form,
{
fields: {
//some fields
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: ".fv-row",
eleInvalidClass: "",
eleValidClass: ""
}),
excluded: new FormValidation.plugins.Excluded({
excluded: function (field, ele, eles) {
if (form.querySelector("[name="" + field + ""]") === null) {
return true;
}
},
}),
}
}
).registerValidator("existClient", existClient);

I suspect the problem is with the ajax petition, but I don't know how to solve it. The ajax petition return the expected data response, and the method enters en the false return, but still doesn't show validation error message.

I'm using Metronic 8 and Django


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)


I'm glad to hear that it worked perfectly for you! If you have any more questions or need further assistance, feel free to reach out.



HI Yasniel Alejandro

The validate function in your existClient validator is expected to return an object synchronously, but AJAX requests are asynchronous.

To handle this, you should use a promise within your validate function. Here’s how you can modify your code:

https://gist.github.com/KeenthemesHub/6c71fa8566bc0dcd1abaa8d44d522c0e



Hi, Faizal
Worked perfectly, thank's a lot


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