3

I have a phtml file with a form that used data-mage-init

<form data-mage-init='{"validation": {}}' class="form" id="custom-form" method="post" autocomplete="off">
</form>

and then I initialize a knockout component at the bottom of the page

<script type="text/x-magento-init">
    {
        "#custom-form": {
            "Magento_Ui/js/core/app": {
               "components": {
                    "mycomponent": {
                        "component": "Company_Module/js/mycomponent"
                    }
                }
            }
        }
    }
</script>

For some reason the validation only works when I remove the "x-magento-init" script at the bottom. I had to make the validation work by calling click using knockoutjs on the button and validating in the component When the "x-magento-init" script is on the page, the submit call on the validation never seems to happen. I can't figure out why? Anyone know?

1 Answer 1

14

If you want to use validation in UI component you need to use data-bind="mageInit: {'validation': {}}" instead of data-mage-init='{"validation":{}}'.

So you form tag should looks like this:

<form data-bind="mageInit: {'validation': {}}" class="form" id="custom-form" method="post" autocomplete="off"> </form>

3
  • This answer should be accepted. Oct 24, 2018 at 18:06
  • Can't believe this isn't documented better in the Dev Docs. Thanks a lot! Dec 14, 2020 at 11:06
  • Thank you so much it is really awesome. I have spent 2 days on this but was not been able to find a solution. Apr 29, 2022 at 9:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.