FormValidation Feedback Not Showing

JShappy

"use strict";

const KTSupportModal = function (){
let modal,
form,
validator;
const handle = function (){
validator = FormValidation.formValidation(form, {
fields: {
subject: {
validators: {
notEmpty: {
message: 'The site name is required'
}
}
},
'message': {
validators: {
notEmpty: {
message: 'The message is required'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
});
form.addEventListener('submit', function (e){
e.preventDefault();
console.log(this);
})
}
return {
init: function (){
modal = document.getElementById('kt_create_ticket');
form = document.getElementById('create_ticket');
handle();
}
};
}();

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

Example

<div class="form-group fv-row">
<label class="form-label">Subject</label>
<select name="subject" class="form-select form-select-solid">
<option value="" selected hidden disabled>Select subject of your ticket</option>
@foreach($subjects as $subject)
<option value="{{ $subject->id }}">{{ $subject->name }}</option>
@endforeach
</select>
</div>

Rendered: https://ibb.co/SnwH89D

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)

(I'm adding it here because I made an error while editing) Hello, I tried a lot, but the formvalidation feedback does not appear with the newly added javascript file. Codes:

Hi,

Do you have any JS errors in the console? Can you please send your console's screenshots as well ?

May I know which Metronic version you are using? Have you tried it with the latest Metronic v8.0.37 ? Can you please check if other form validation examples work in the original Metronic templates that you are referring to?

Regards.

Firstly, Thanks for your response Sean. I cant add screenshots from the console because completely clear. I'm using the latest version of Metronic and yeah I have one more problem like that on another page. I compared much more times me and base versions then I found a missing part. Missing part like that below:

if (validator)
{
...
}

I added this part to my codes and now working correctly. I think it happens a very interesting thing because why? happy Why do I need if statement? happy

Hi happy,

Great! It just checks if the form validation object is available for the rest of the code.

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