Magento 2 – Validate Form and Display Error Message Below Input Field

contact-formform-validationformsmagento2validation

In magento 1.x we use the following code to validate Magento forms:

<script type="text/javascript"> 
    var myForm= new VarienForm('contactstore', true);
</script>

I am using this code from the magento 2 contact form:

<div class="field email required">
  <label class="label" for="email"><span>Email</span></label>
    <div class="control">
      <input name="email" id="email" title="Email" value="" class="input-text" type="email" data-validate="{required:true, 'validate-email':true}" aria-required="true">
    </div>
</div>

My question is: how do I validate a custom form in Magento 2?

Best Answer

You need to do add data-mage-init='{"validation":{}}' inside form declaration as following:


<form class="form contact"
      action="<?php /* @escapeNotVerified */ echo $block->getFormAction(); ?>"
      id="contact-form"
      method="post"
      data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>"
      data-mage-init='{"validation":{}}'>

Click here

Related Solutions

Magento – Return errors to form

It is better to tie the validate methods to the model. In your model you can include the validate method as follows:

public function validate() {
    $errors = array();

    if (!Zend_Validate::is($this->getFirstName(), 'NotEmpty')) {
        $errors[] = 'First name is needed';
    }

    if (!Zend_Validate::is($this->getLastName(), 'NotEmpty')) {
        $errors[] = 'Last name is needed';
    }

    if (!Zend_Validate::is($this->getDesignation(), 'NotEmpty')) {
        $errors[] = 'Designation is needed';
    }

    if (empty($errors)) {
        return true;
    }

    return $errors;
}

Then in the controller you can use it as follows:

if ($data = $this->getRequest()->getPost()) {

        $users = Mage::getModel('tableop/users')->setData($data);

        $session = Mage::getSingleton('tableop/session');

        $validate = $users->validate();         
        if ($validate === true) {

....etc

For the error and success messages part, you can use Mage::getSingleton('core/session')->addError or addSuccess methods. You can use your own session objects also.

For more information refer Mage/Review/controllers/ProductController.

Magento 2 – Date Validation on Custom Form Frontend

You can do it using errorPlacement function,

   <script type="text/javascript">
    //added by navin
    require(['jquery','mage/mage'], function(){
        var dataForm = jQuery('#edit-form-validate');
        dataForm.mage('validation', {
             errorPlacement: function(error, element) {
                    var errorPlacement = element;
                    console.log(element.val());
                    if (element.val()) {

                        //do your custom validation code.....
                    }
                }

        });

    });   

    </script>

Best Answer

Related Solutions

Magento – Return errors to form

Magento 2 – Date Validation on Custom Form Frontend

Related Topic