I followed this guide in order to add a new validation to my checkout. I deployed the content, cleared the cache and enabled the module several times but the validation is not working.
I also added a console.log('foobar'); to the isGmail.js file inside the validate function, but it never gets printed. I also checked the pub folder for the content and it is right there.
Magento 2.2.3
Any ideas what might be wrong?
Thanks!
not sure exactly what's going on. I followed the tutorial as well and was able to get everything to show up.
The first thing to check is that the files are being loaded in checkout. Jump into your inspector and under the network tab make sure both file are being loaded.
If they are, then you know that your deploy is correct and that the XML that you have is correct as well. If the files aren't showing up, then check your XML first to make sure that you have that correct. The file i have is full of other checkout stuff when i tested it, but the section that i grabbed is working for me, so odds are that's fine.
If the view file is loading and not the model file then it might be an issue with the call to that file in the JS dependencies. Make sure Mageplaza_HelloWorld/js/model/isGmail is the correct path you have for your module.
From there you can check with some test code. For me, this console.log loads then i hit checkout:
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/additional-validators',
'CustomerParadigm_CheckoutLearning/js/model/isGmail'
],
function (Component, additionalValidators, gmailValidation) {
'use strict';
additionalValidators.registerValidator(gmailValidation);
console.log('in the view/gmail');
return Component.extend({});
}
);
And for this section, the first console.log loads when i hit the checkout page and the second only triggers when i hit the place order button:
define(
[
'jquery',
'mage/validation'
],
function ($) {
'use strict';
console.log('outside return in the model/gmail');
return {
/**
* Validate checkout agreements
*
* @returns {Boolean}
*/
validate: function () {
var emailValidationResult = false;
var email = $('form[data-role=email-with-possible-login]').val();
if(~email.search("gmail.com")){ //should use Regular expression in real store.
emailValidationResult = true;
}
console.log('inside validate in the model/gmail');
return emailValidationResult;
}
};
}
);
Play around with it and let me know where you are getting stuck.
As a side note, this user experience is really bad, as in you can't place the order, but there is no feedback on what is wrong and why it's not working. I would check this out and see if that gets you closer to where you want to be for custom form validation. It's not the same application, but it's using the same concepts.
