10

I have a form that is generated through a .phtml file, and in this form various fields are loaded with KnockOut (using the uiComponent javascript-object).

.phtml:

<form action="#" class="form checkout__account" method="post" data-mage-init='{"validation":{}}'>
    <?php echo $block->getBlockHtml('formkey'); ?>
    <fieldset class="fieldset" data-bind="scope:'vendor_module_account'">
        <!--
            Account form:
        -->
        <!-- ko template: getTemplate() --><!-- /ko -->
    </fieldset>
</form>

.html (which is inserted in ko template: getTemplate()):

<input type="text" name="login[username]" id="email" class="input-text required-entry"
       data-validate="{required:true, 'validate-email':true}"
       data-bind="event:{change:checkEmailAddress,blur:checkEmailAddress,keypress:absorbEnter},value:emailAddress" />

Now I can get it why this wouldn't directly work on blur, but also when I submit the form (Using the inspector $0.submit()) the validation doesn't get executed.

Another interesting detail: the form gets an attribute novalidate="novalidate" added, I guess by the data-mage-init-attribute.

Anyone know why my form isn't validated and/or what I have to do is make it validate on submit/blur?

4
  • Did you find a solution for this? Oct 19, 2017 at 15:10
  • Any idea on this? I had a similar issue and had to call a click event using knockout to validate. I'm wondering why it wouldn't work by using data-mage-init
    – jstrez77
    May 10, 2018 at 15:28
  • I am also facing this same issue? Any idea how did you got rid of this ?? Feb 10, 2019 at 13:25
  • Any update on this guys? Oct 19, 2020 at 2:25

3 Answers 3

0

Well, 4 years from this question but I found a solution for those facing this issue as I was today.

In your js component file, import this:

...
'jquery/validate',
'mage/validation'
...

And then we must override the original validate function, at least I had to:

/** @inheritdoc */
  validate: function () {
  const $form = $('#your-form')
  $form.validation()
  return $form.valid()
},

Finally, associate the validate to the click bind on the form element:

<form 
        method="post" 
        id="your-form" 
        class="form form-default" 
        data-bind="click: validate"
>

That's it. It works fine and you can now manipulate the validate function and use it's result to call or not other functions. When the validation fails, it returns false.

Hope it helps.

0

If you want to validate the Individual field on the blur event in your Magento 2 form then please add the below script in your code.

require([
'jquery',
'mage/validation'
], function($){

var dataForm = $('#amform-form-12');
var ignore = null;

dataForm.mage('validation', {
    ignore: ignore ? ':hidden:not(' + ignore + ')' : ':hidden'
}).find('input:text').attr('autocomplete', 'off');

$('#amform-form-12 input').on('blur', function() {
     // validate  
    $.validator.validateSingleElement($(this));
});
});
0
document.querySelector('.form.checkout__account').removeAttribute('novalidate');
var yourForm = $('#your-form-id');
yourForm.mage('validation', {});

// Add custom knockout.js validation
ko.bindingHandlers.validate = {
    init: function (element, valueAccessor) {
        $(element).on('blur', function () {
            // Your validation logic here
        });
    }
};

Your Answer

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

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