Hello,
Please, I have a question on how to validate fields. For example with "Text Input".
On the website (https://preview.keenthemes.com/html/metronic/docs/forms/formvalidation/basic) there are several examples but I can't get it to work.
Please, someone could help me.
Thank you very much.
Ricardo.
An additional comment:
I'm having trouble submitting the form. I don't know exactly where to apply.
I saw in the documentation the use of:
form.submit(); // submit form
Hi,
Sorry for the late reply.
The JS code you passed from compiled assets folder. To work with Javascript you will need to edit the source Javascript code in the src/js/custom/pages/careers/apply.js
and recompile the assets folder using gulp as explained here.
To submit the form you will need to remove the example timeout code:
setTimeout(function() {
.....
}
form.submit();
Hi, thanks a lot for your help.
I'm using the latest version (Metronic 8).
JS codes:
"use strict";
var KTCareersApply=function(){var t,e,i;
return{init:function(){
i=document.querySelector("#kt_careers_form"),
t=document.getElementById("kt_careers_submit_button"),
$(i.querySelector("[name="type_reference"]")).on("change",(function(){e.revalidateField("type_reference")})),
$(i.querySelector("[name="start_date"]")).flatpickr({enableTime:!1,dateFormat:"d, M Y"}),
e=FormValidation.formValidation(i,{fields:{first_name:{validators:{notEmpty:{message:"First name is required"}}},
project_reference:{validators:{notEmpty:{message:"Project reference is required"}}},
age:{validators:{notEmpty:{message:"Age is required"}}},
city:{validators:{notEmpty:{message:"City is required"}}},
email:{validators:{notEmpty:{message:"Email address is required"},
emailAddress:{message:"The value is not a valid email address"}}},
salary:{validators:{notEmpty:{message:"Expected salary is required"}}},
type_reference:{validators:{notEmpty:{message:"Type Reference is required"}}},
start_date:{validators:{notEmpty:{message:"Start date is required"}}}},
plugins:{trigger:new FormValidation.plugins.Trigger,
bootstrap:new FormValidation.plugins.Bootstrap5({rowSelector:".fv-row",eleInvalidClass:"",eleValidClass:""})}}),
t.addEventListener("click",(function(i){i.preventDefault(),e&&e.validate().then((function(e){console.log("validated!"),"Valid"==e?(t.setAttribute("data-kt-indicator","on"),
t.disabled=!0,setTimeout((function(){t.removeAttribute("data-kt-indicator"),
t.disabled=!1,Swal.fire({text:"Form has been successfully submitted!",
icon:"success",buttonsStyling:!1,confirmButtonText:"Ok, got it!",
customClass:{confirmButton:"btn btn-primary"}}).then((function(t){t.isConfirmed,i.submit()}))}),2e3)):Swal.fire({text:"Sorry, looks like there are some errors detected, please try again.",
icon:"error",buttonsStyling:!1,confirmButtonText:"Ok, got it!",customClass:{confirmButton:"btn btn-primary"}}).then((function(t){KTUtil.scrollTop()}))}))}))}}}();KTUtil.onDOMContentLoaded((function(){KTCareersApply.init()}));
<!--begin::Content-->
<div class="app-content flex-column-fluid">
<!--begin::Content container-->
<div class="app-container container-sx">
<!--begin::Careers - Apply-->
<div class="card">
<!--begin::Body-->
<div class="card-body p-lg-6">
<!--begin::Form-->
<form action="private/class/pre_class/pre_class_grava_material_interno.php?nome_material_interno=ttt&comentario=ttt" class="form mb-15" method="get" >
<!--begin::Input group-->
<div class="d-flex flex-column mb-5 fv-row">
<!--begin::Label-->
<label class="required fs-5 fw-semibold mb-2">Project Reference</label>
<!--end::Label-->
<!--begin::Input-->
<input type="text" class="form-control form-control-solid" placeholder="" name="project_reference" />
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="d-flex flex-column mb-5 fv-row">
<!--begin::Label-->
<label class="d-flex align-items-center fs-5 fw-semibold mb-2">
<span class="required">Type Reference</span>
<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Your payment statements may very based on selected position"></i>
</label>
<!--end::Label-->
<!--begin::Select-->
<select name="type_reference" data-control="select2" data-placeholder="Select a type..." class="form-select form-select-solid">
<option value="Purchase Order">Purchase Order</option>
<option value="Memo">Memo</option>
<option value="Name">Name</option>
<option value="Date">Date</option>
<option value="Others">Others</option>
</select>
<!--end::Select-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="d-flex flex-column mb-5">
<label class="required fs-6 fw-semibold mb-2">Comment (Optional)</label>
<textarea class="form-control form-control-solid" rows="4" name="experience" placeholder=""></textarea>
</div>
<!--end::Input group-->
<!--begin::Separator
<div class="separator mb-8"></div>
<!--end::Separator-->
<!--begin::Submit-->
<button type="submit" class="btn btn-primary" >
<!--begin::Indicator label-->
<span class="indicator-label">Apply Now</span>
<!--end::Indicator label-->
<!--begin::Indicator progress-->
<span class="indicator-progress">Please wait...
<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
<!--end::Indicator progress-->
</button>
<!--end::Submit-->
<!--begin::Submit-->
<button type="submit" class="btn btn-primary" >add
</button>
<!--end::Submit-->
</form>
<!--end::Form-->
</div>
<!--end::Body-->
</div>
<!--end::Careers - Apply-->
</div>
<!--end::Content container-->
</div>
Hi,
May I know which Metronic version are you using ? Where do you add the JS of the form validation code ?
Please note that when you work with JS you will need to edit it in theme/src/js
and then recompile your assets folder with Gulp or Webpack.
Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment you will only need the compile assets, no need to install the build tools dependencies there.
Regards