Magento – Validation callback in magento2

form-validationjquerymagento2validation

var dataForm = jQuery('#form');
dataForm.mage('validation');
function submitForm(){                
    if (dataForm.valid()){
        dataForm.submit();
    }
}

Everything is working well what i want some kind of callback function when valid() returns false.

I tried and found that there is some option for adding custom error messages like

dataForm.mage('validation',{
    errorPlacement:function(error,element){
        var errorPlacement = element;
        errorPlacement.after(error);
        /* we can do custom stuff here */
    }
});

But this doesn't works well it only create element for first time when validation called.

I need callback function that call everytime whenever validation failed.

Best Answer

var dataForm = jQuery('#form');
dataForm.mage('validation');
function submitForm(){                
    if (dataForm.valid()){
        dataForm.submit();
    }else{
        var elements = $('#submitbtn');
        $('.magerror').remove();
        var error = "<div class='magerror'>This is required field</div>";
        elements.after(error);
    }
}

<form class="forms" id="form">
    <div class="aaaa">
        <button type="submit" id="submitbtn">Submit</button>
    </div>
</form>

Related Solutions

Magento 1.9 Validation – Modify Existing Prototype JS Validation Method

Here is how you can either override an existing validation method or create your own. There is only one js snippet below bc its the exact same procedure for either one. In my example, I override an existing Magento validation type.

First, add your custom js file to whatever page(s) you need:

<reference name="head">
    <action method="addItem"><type>js</type><file>my/custom/validation.js</file></action>
</reference>

Then create your js file following this example:

Validation.addAllThese([
  ['validate-zero-or-greater', 'This is my custom error message', function(v) {
    if(something){
      return false;
    } else {
      return true;
    }
  }]
]);

I tested this before posting.

Update:

In your javascript file, the below snippet will catch ALL failed js validation. If you reach the inside of the "if" statement, then you can attempt to log with javascript but you will most likely need to send the data to a controller using ajax.

Validation.prototype.validate = Validation.prototype.validate.wrap(
  function(parentFunction) {
    var result = parentFunction();
    if(!result){
      var form = this.form;
      for (var i in form) {
        if (form.hasOwnProperty(i)) {
          var element = form[i];
          if(element.hasClassName('validation-failed')){
            alert(element.id);
          }
        }
      }
    }
    return result;
  }
);

This one logs to the console if that's what you are looking for.

Validation.prototype.validate = Validation.prototype.validate.wrap(
  function(parentFunction) {
    var result = parentFunction();
    if(!result){
      var form = this.form;
      for (var i in form) {
        if (form.hasOwnProperty(i)) {
          var element = form[i];
          if(element.hasClassName('validation-failed')){
            console.log('Element ID is ' + element.id + '. The failed value is \'' + element.value + '\'');
          }
        }
      }
    }
    return result;
  }
);

Magento 2 – JS Modal Popup Close Event

You don't have to extend the modal.

You simply have to listen for the 'modalclosed' event on the DOM element on which the modal had been invoked. In fact the modal() function returns this element which makes the code trivial.

$('#popup-modal').on('modalclosed', function() { 
  /*insert code here*/ 
});

Best Answer

Related Solutions

Magento 1.9 Validation – Modify Existing Prototype JS Validation Method

Magento 2 – JS Modal Popup Close Event

Related Topic