Magento 2 – Trigger JS Form Validation Without Submit

form-validationfrontendjavascriptmagento2

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.

Best Answer

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

Related Topic