"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();
});

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