Metronic formValidation
Hi
How can i use element id instead element name in form Validation of Metronic 8.2.6?
Replies (4)
"Thank you for your response. However, this situation is only suitable for static forms where all items are specified and a separate configuration must be created for each form. It is not applicable for dynamic forms where items are not predefined and are later defined by the user through the form builder. I want to create a fixed configuration with various types of essential items to check the forms based on item IDs and examine their necessity regardless of what their names are. In fact, the validation configuration are only created once with a high number of predetermined IDs and are connected to the form items defined by the user. How can this be changed in Metronic 8.2 so that validation is performed based on IDs instead of names?"
Hi,
For advanced usage of the form validation plugin please refer to its documentation. Our support does not fully cover 3-rd party plugin support. I believe you can find there all the possible options.
Regards,
Sean
Thank you
Hi,
formValidation relies on name attributes by default. However you can assign a unique ID to each form field:
<form >
<div class="form-group">
<label for="emailField">Email</label>
<input type="email" class="form-control" />
</div>
<div class="form-group">
<label for="passwordField">Password</label>
<input type="password" class="form-control" />
</div>
<button type="submit">Submit</button>
</form>In your FormValidation configuration, map the id of the fields to their validation rules in the fields property.
document.addEventListener("DOMContentLoaded", function () {
const formElement = document.getElementById("myForm");
FormValidation.formValidation(formElement, {
fields: {
emailField: { // Match the `id` of the field
validators: {
notEmpty: {
message: "The email address is required",
},
emailAddress: {
message: "The input is not a valid email address",
},
},
},
passwordField: { // Match the `id` of the field
validators: {
notEmpty: {
message: "The password is required",
},
stringLength: {
min: 6,
message: "The password must be at least 6 characters long",
},
},
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5(),
submitButton: new FormValidation.plugins.SubmitButton(),
},
});
});Regards,
Sean
