Magento2: How to validate form and display error message below input field

Question

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?

Answer 1

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

Answer 2

Form Validation can be applied in three ways:

1)

<script type="text/x-magento-init">
{
    "#custom-form": {
    "validation": {}
    }
}
</script>

2)

<form data-mage-init='{"validation": {}}' 
class="form" id="custom-form" method="post" autocomplete="off">

3)

<script type="text/javascript">
require([
  'jquery',
  'mage/mage'
], function($){

var dataForm = $('#custom-form');
dataForm.mage('validation', {});
});
</script>

Further you may need validation classed from the below list. You just need to add css class for the rule to apply.

min_text_length

max_text_length

max-words min-words

range-words

letters-with-basic-punc

alphanumeric

letters-only

no-whitespace

See more in this link: http://blog.i13websolution.com/magento-2-validation-rules/

Answer 3

Form ID: #custom-register-form

Before Submit the form Check the validation

To Check All Fields & Display Error:

$('#custom-register-form').on('submit', function (event) {
var dataForm = jQuery('#custom-register-form');
if(dataForm.validation('isValid') === false){
    return false;
}});

To Single Fields & Display Error:

$("#custom-register-form input").bind('keyup focusout autocompletechange change', function (){$(this).valid();});