Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Metronic formValidation


Hi
How can i use element id instead element name in form Validation of Metronic 8.2.6?


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

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


Hi,

formValidation relies on name attributes by default. However you can assign a unique ID to each form field:

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

Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(