How to add custom js form validation with custom error message in magento2?

Question

I am trying to do a custom js validation for a form field, I added this in my phtml file :

var theForm = new VarienForm('form-validate', true);
Validation.add('validate-testx','You failed to enter baz!',function(v){
if(v == 'baz')
{
return true;
}
return false;
});

and added

validate-testx

to the filed's css class but it did not work. I am using magento 2, please help.

• Arun S: I achieved it using the following: <script type="text/javascript"> require([ 'jquery', // jquery Library 'jquery/ui', // Jquery UI Library 'jquery/validate', // Jquery Validation Library 'mage/translate' // Magento text translate (Validation message translte as per language) ], function($){ $.validator.addMethod( 'validate-member-card', function (value) { return (value.length === 16 && /^[a-zA-Z0-9]+$/.test(value)); // Validation logic here }, $.mage.__('Not a valid Membership ID')); }); </script> Worked fine..

Answer 1

I wanted a to add a custom rule with custom error message, I achieved it using:

<script type="text/javascript">
require([
'jquery', // jquery Library
'jquery/ui', // Jquery UI Library
'jquery/validate', // Jquery Validation Library
'mage/translate' // Magento text translate (Validation message translte as per language)
], function($){
$.validator.addMethod(
'validate-member-card', function (value) {
return (value.length === 16 && /^[a-zA-Z0-9]+$/.test(value)); // Validation logic here
}, $.mage.__('Not a valid Membership ID'));
});
</script>

Worked fine.

Answer 2

without .js you can do like this for better practice.

<form action="<?php echo $block->getBaseUrl() . 'frontneme/index/action';?>" method="post" id="form-validate" enctype="multipart/form-data" autocomplete="off" data-mage-init='{"validation":{}}' data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>">
<div class="field required">
 <label for="order_id" class="label"><span><?php /* @escapeNotVerified */ echo __('Order Id') ?></span><span class="span">*</span></label>
 <div class="control">
 <input type="text" name="order_id" value="" autocomplete="off" title="<?php /* @escapeNotVerified */ echo __('Order Id') ?>" class="input-text " id="order_id" data-validate="{required:true}">
 </div>
 </div>
</form>

when submit the form magento2 automatically showing it is mandatory like client side validation same as javascript.

• Arun S: No I wanted a to add a custom rule with custom error message,I achieved it using: <script type="text/javascript"> require([ 'jquery', // jquery Library 'jquery/ui', // Jquery UI Library 'jquery/validate', // Jquery Validation Library 'mage/translate' // Magento text translate (Validation message translte as per language) ], function($){ $.validator.addMethod( 'validate-member-card', function (value) { return (value.length === 16 && /^[a-zA-Z0-9]+$/.test(value)); // Validation logic here }, $.mage.__('Not a valid Membership ID')); }); </script> Worked fine.. thanks for the reply