7

On a custom frontend page I have a form in which I use magento's js validation to validate inputs: name, email description, etc. When the form is submitted the validation is triggered and works properly. I am wondering if there is a way to manually invoke magento's js validation without requiring a "submit" action.

Here is what I use to apply the validation

var dataForm = $('#form-validate');
var ignore = null;
dataForm.mage('validation', {
    ignore: ignore ? ':hidden:not(' + ignore + ')' : ':hidden'
}).find('input:text').attr('autocomplete', 'off');

and I am looking for

$("#form-validate").mageValidate();  // validate form fields

Let me know if you need more detail.

  • I have tried requiring mage/validation and then using $('#form-validate').validation(); but validation does not seem to be triggered – Xenocide8998 Nov 1 '16 at 20:25
28

was able to figure this out by referencing:

module-checkout-agreements/view/frontend/web/js/model/agreement-validator.js

After including mage/validation you have to pass argument isValid to mage.validation in order to invoke the validation

Full code looks like

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

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

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

    $('button#my-button').click( function() { //can be replaced with any event
        dataForm.validation('isValid'); //validates form and returns boolean
    });
});

You can also replace argument with clearError to remove validation error messages

  • it is giving folowing error: Uncaught Error: cannot call methods on validation prior to initialization; attempted to call method 'isValid' – Krishnan Daiva Dec 29 '17 at 10:02
  • try adding data-mage-init='{"validation":{}}' attribute to form, also double check your form selector is correct. – Xenocide8998 Jan 1 '18 at 18:40
2

You can try this:

require(["jquery"], function ($) {
    $(document).ready(function () {
        $('#my-button-name').click(function () { // The button type should be "button" and not submit
            if ($('#form-name').valid()) {
                alert("Validation pass");
                return false;
            }else{
                alert("Validation failed");
                return false;
            }
        });
    });
});

Hope this may help you!

  • if ($('#form-name').valid()) this is not work for me – Jaisa Dec 24 '18 at 7:06
  • showing error like this jquery.validate.js:111 Uncaught TypeError: Cannot read property 'form' of undefined – Jaisa Dec 24 '18 at 7:07
  • if($('#form-id').valid() === false){ return false; }; is nice. – Manish Goswami Nov 14 '19 at 8:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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