13

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.

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

3 Answers 3

41

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

3
  • it is giving folowing error: Uncaught Error: cannot call methods on validation prior to initialization; attempted to call method 'isValid' Dec 29, 2017 at 10:02
  • try adding data-mage-init='{"validation":{}}' attribute to form, also double check your form selector is correct. Jan 1, 2018 at 18:40
  • @Xenocide8998, Thank you so much. It's work.
    – Ravi Soni
    Jun 11, 2020 at 5:36
9

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!

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

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));
});
});

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.