magento 2: trigger js form validation without submit

Question

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.

Answer 1

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

Answer 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!

Answer 3

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

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

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

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

$('#form-id input').on('blur', function() {
     // validate  
    $.validator.validateSingleElement($(this));
});
});

Answer 4

You can use this code to check form validation before submit, Reset the form after submit and clear the validation messages -

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
        // (Method - 1)
        dataForm.validation('isValid'); //validates form and returns boolean
        // OR (Method - 2)
        if(dataForm.valid()){
            dataForm[0].reset();    // to reset the form 
            dataForm.validation('clearError');      // to remove validation error messages
        }
    });
});