4

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?

17

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

  • I can add and remove fields from the JS validation. I removed the name fields from the registration form, but back-end still requires them, and I don't know where to find the settings! :-O – Design by Adrian Nov 9 '16 at 11:19
  • I want display error and custom message when blur input. Please help me? – xanka Apr 20 '17 at 4:06
  • For a custom checkbox i want to please this message "This is a required field" if checkbox is not checked. – Sarfaraj Sipai Jan 1 '18 at 9:21
3

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/

  • Hi Ahmad Thanks for the solution, the error message div coming below to the input box at newsletter subscribe section in footer. how to make it above the input box. – Vinit Kumar Dec 21 '19 at 3:36
2

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

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.