There are 3 different ways to use form validation in magento 2
To enable javascript validation use following code in your template
<form class="form" id="custom-form" method="post" autocomplete="off">
<fieldset class="fieldset">
<legend class="legend"><span><?php echo __('Personal Information') ?></span></legend><br>
<div class="field required">
<label for="email_address" class="label"><span><?php echo __('Email') ?></span></label>
<div class="control">
<input type="email" name="email" id="email_address" value="" title="<?php echo __('Email') ?>" class="input-text" data-validate="{required:true, 'validate-email':true}">
</div>
</div>
</fieldset>
<div class="actions-toolbar">
<div class="primary">
<button type="submit" class="action submit primary" title="<?php echo __('Submit') ?>"><span><?php echo __('Submit') ?></span></button>
</div>
</div>
</form>
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>
*custom-form is form id you can replace it with your form id
List of form validation rules
To wrap up this article, a list of validation rule names is provided here as a quick reference toward the official documentation:
Magento rules:
validate-no-html-tags
validate-select
validate-no-empty
validate-alphanum-with-spaces
validate-data
validate-street
validate-phoneStrict
validate-phoneLax
validate-fax
validate-email
validate-emailSender
validate-password
validate-admin-password
validate-customer-password
validate-url
validate-clean-url
validate-xml-identifier
validate-ssn
validate-zip-us
validate-date-au
validate-currency-dollar
validate-not-negative-number
validate-zero-or-greater
validate-greater-than-zero
validate-css-length
validate-number
required-number
validate-number-range
validate-digits
validate-digits-range
validate-range
validate-alpha
validate-code
validate-alphanum
validate-date
validate-date-range
validate-cpassword
validate-identifier
validate-zip-international
validate-one-required
validate-state
required-file
validate-ajax-error
validate-optional-datetime
validate-required-datetime
validate-one-required-by-name
less-than-equals-to
greater-than-equals-to
validate-emails
validate-cc-type-select
validate-cc-number
validate-cc-type
validate-cc-exp
validate-cc-cvn
validate-cc-ukss
validate-length
required-entry
not-negative-amount
validate-per-page-value-list
validate-per-page-value
validate-new-password
required-if-not-specified
required-if-all-sku-empty-and-file-not-loaded
required-if-specified
required-number-if-specified
datetime-validation
required-text-swatch-entry
required-visual-swatch-entry
required-dropdown-attribute-entry
Validate-item-quantity
validate-grouped-qty
validate-one-checkbox-required-by-name
validate-date-between
validate-dob
max-words
min-words
range-words
letters-with-basic-punc
alphanumeric
letters-only
no-whitespace
zip-range
integer
vinUS
dateITA
dateNL
time
time12h
phoneUS
phoneUK
mobileUK
stripped-min-length
email2
url2
credit-card-types
ipv4
ipv6
pattern
allow-container-className
jQuery rules:
required,
remote,
email,
url,
date,
dateISO,
number,
digits,
creditcard,
equalTo,
maxlength,
minlength,
rangelength,
range,
max,
min
refer http://inchoo.net/magento-2/validate-custom-form-in-magento-2/
modified the below files
replace full code in dob.phtml
<?php
$dob=$block->getDate();
$year='';
$smonth='';
$day='';
if($dob){
$dateofbirth = explode("-", $dob);
$year=$dateofbirth[0];
$smonth=$dateofbirth[1];
$day=$dateofbirth[2];
}
?>
<div class="field dob customer-dob">
<label for="dob" class="label"><span><?php /* @escapeNotVerified */ echo __('Date of birth') ?></span>
<span class="optional"><?php /* @escapeNotVerified */ echo __('(optional)') ?></span>
</label>
<div class="control">
<input type="hidden" class="" value="<?php echo $dob; ?>" id="dob" name="dob" autocomplete="off">
<input type="text" value="<?php echo $day; ?>" name="date" id="dob_dd" title="<?php /* @escapeNotVerified */ echo __('dd') ?>" class="input-text validate-cdobd" placeholder="DD" style="width:20%" maxlength="2"
onkeyup="moveOnMax(this,document.getElementById('dob_mm'))"/>
<select id="dob_mm" name="month" title="<?php /* @escapeNotVerified */ echo __('mm') ?>" style="width:20%;" class="select validate-cdobm">
<option value=""><?php /* @escapeNotVerified */ echo __('MM') ?></option>
<?php for($month=1;$month<=12;$month++):?>
<option value="<?php /* @escapeNotVerified */ echo __($month) ?>" <?php if ($month == $smonth) echo ' selected="selected"' ?> ><?php /* @escapeNotVerified */ echo __($month) ?></option>
<?php endfor; ?>
</select>
<input type="text" maxlength="4" value="<?php echo $year; ?>"name="year" id="dob_yy" title="<?php /* @escapeNotVerified */ echo __('yy') ?>" class="validate-cdoby" placeholder="YYYY" style="width:20%" onkeyup="moveOnMax(this,document.getElementById('gender'))"/>
<div class="validate-custom"></div>
</div>
<div class="clearboth"></div>
</div>
<script type="text/javascript">
function moveOnMax(field, nextFieldID) {
if (field.value.length >= field.maxLength) { nextFieldID.focus(); }
}
</script>
in edit.phtml add below script in the end of the file
<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($){
var dataForm = $('#form-validate');
var ignore = <?php echo $_dob->isEnabled() ? '\'input[id$="full"]\'' : 'null'; ?>;
dataForm.mage('validation', {
<?php if ($_dob->isEnabled()): ?>
errorPlacement: function(error, element) {
if (element.prop('id').search('dob_dd') !== -1 || element.prop('id').search('dob_mm') !== -1 || element.prop('id').search('dob_yy') !== -1) {
var dobElement = $(element).parents('.customer-dob'),
errorClass = error.prop('class');
error.insertAfter($('.validate-custom'));
}
else {
error.insertAfter(element);
}
},
ignore: ':hidden:not(' + ignore + ')'
<?php else: ?>
ignore: ignore ? ':hidden:not(' + ignore + ')' : ':hidden'
<?php endif ?>
});
$.validator.addMethod(
'validate-cdobd', function(value) {
var postToRahaha = $("#dob_yy").val();
var dayVal = $("#dob_dd").val(),
monthVal = $("#dob_mm").val(),
yearVal = $("#dob_yy").val(),
dobLength = dayVal.length + monthVal.length + yearVal.length;
/* if (params[3] && dobLength === 0) {
this.dobErrorMessage = 'This is a required field.';
return false;
}*/
if (dobLength=== 0) {
return true;
}
var day = parseInt(dayVal, 10) || 0,
month = parseInt(monthVal, 10) || 0,
year = parseInt(yearVal, 10) || 0,
curYear = (new Date()).getFullYear();
if (!day) {
this.dobErrorMessage = 'Please enter a valid full date.';
return false;
}
var validateDayInMonth = new Date(year, month, 0).getDate();
if (day < 1 || day > validateDayInMonth) {
var validDateMessage = $.mage.__('Please enter a valid day (1-%1).');
this.dobErrorMessage = validDateMessage.replace('%1', validateDayInMonth.toString());
return false;
}
var today = new Date(),
dateEntered = new Date();
dateEntered.setFullYear(year, month - 1, day);
if (dateEntered > today) {
this.dobErrorMessage = $.mage.__('Please enter a date from the past.');
return false;
}
return true;
},
function () {
return this.dobErrorMessage;
}
);
$.validator.addMethod(
'validate-cdobm', function(value) {
var postToRahaha = $("#dob_yy").val();
var dayVal = $("#dob_dd").val(),
monthVal = $("#dob_mm").val(),
yearVal = $("#dob_yy").val(),
dobLength = dayVal.length + monthVal.length + yearVal.length;
/* if (params[3] && dobLength === 0) {
this.dobErrorMessage = 'This is a required field.';
return false;
}*/
if (dobLength=== 0) {
return true;
}
var day = parseInt(dayVal, 10) || 0,
month = parseInt(monthVal, 10) || 0,
year = parseInt(yearVal, 10) || 0,
curYear = (new Date()).getFullYear();
if (month < 1 || month > 12) {
this.dobErrorMessage = 'Please select a valid month.';
return false;
}
return true;
},
function () {
return this.dobErrorMessage;
}
);
$.validator.addMethod(
'validate-cdoby', function(value) {
var postToRahaha = $("#dob_yy").val();
var dayVal = $("#dob_dd").val(),
monthVal = $("#dob_mm").val(),
yearVal = $("#dob_yy").val(),
dobLength = dayVal.length + monthVal.length + yearVal.length;
/* if (params[3] && dobLength === 0) {
this.dobErrorMessage = 'This is a required field.';
return false;
}*/
if (dobLength=== 0) {
return true;
}
var day = parseInt(dayVal, 10) || 0,
month = parseInt(monthVal, 10) || 0,
year = parseInt(yearVal, 10) || 0,
curYear = (new Date()).getFullYear();
var today = new Date(),
dateEntered = new Date();
dateEntered.setFullYear(year, month - 1, day);
if (!(dateEntered > today)){
if (year < 1900 || year > curYear) {
var validYearMessage = $.mage.__('Please enter a valid year (1900-%1).');
this.dobErrorMessage = validYearMessage.replace('%1', curYear.toString());
return false;
}
}
day = day % 10 === day ? '0' + day : day;
month = month % 10 === month ? '0' + month : month;
$('#dob').val(month + '/' + day + '/' + year);
return true;
},
function () {
return this.dobErrorMessage;
}
);
});
</script>
make sure dob attribute enable from admin :-)
Best Answer
After few hours of experimenting I made some changes for previous code which works for my problem:
Hope that help or inspire someone for better solution. "Document ready" was required due Translator.translate() existence. Translation of string "Please enter a valid post code." was added in jstranslator.xml file.