I am facing this issue TypeError: t.validator.methods[a] is undefined after adding jquery validation in my form.
Here is my validation code:
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type="text/javascript">
require([
'jquery'
], function($)
{
jQuery(document).ready(function()
{
jQuery("#form-validate").validate(
{
rules:
{
email:
{
required: true,
email: true
},
password :
{
required: true,
passwordCheck: true
},
password_confirmation:
{
required: true,
equalTo : "#password"
},
firstname: "required",
lastname: "required",
zip_code:
{
required: true,
maxlength:8,
},
},
messages:
{
email: "Please enter a valid Email Address",
password:
{
required: "Please enter your Password",
passwordCheck: "Use at least one lowercase letter, one capital letter, and one number with atleast 6 characters",
},
password_confirmation:
{
required: "Please enter you Password Confirmation",
equalTo: "Your Password and Confirm Password does not match",
},
firstname: "Please enter your First Name",
lastname: "Please enter your Last Name",
zip_code:
{
required: "Please enter your Zipcode",
},
},
submitHandler: function(form, event)
{
event.preventDefault();
form.submit();
}
});
jQuery.validator.addMethod("passwordCheck", function(value)
{
var regex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\w\s]).{6,}$/;
// // return /^[A-Za-z0-9\d=!\-@._*]*$/.test(value) // consists of only these
// // && /[a-z]/.test(value) // has a lowercase letter
// // && /\d/.test(value) // has a digit
// //console.log('pass: ' + regex.test(value))
return regex.test(value);
});
});
});
</script>
My input field:
<div class="field password">
<label for="password" class="label"><span><?= $block->escapeHtml(__('Choose a Password')) ?></span></label>
<div class="control">
<input style="color: #000 !important;" type="password" name="password" id="password"
title="<?= $block->escapeHtmlAttr(__('Password')) ?>"
class="input-text input-design" autocomplete="off" passwordCheck="passwordCheck">
<div id="password-strength-meter-container" data-role="password-strength-meter" aria-live="polite">
<div id="password-strength-meter" class="password-strength-meter">
<label class="input_belowline">
Your password must contain six or more characters, with at least one lowercase letter, one capital letter, and one number.</label>
<!-- <?= $block->escapeHtml(__('Password Strength')) ?>:
<span id="password-strength-meter-label" data-role="password-strength-meter-label">
<?= $block->escapeHtml(__('No Password')) ?> -->
</div>
</div>
</div>
</div>
I don't know where I am making mistake.
Any help would be appreciated.
Best Answer
You can define
jQuery
in your require function