cancel
Showing results for 
Search instead for 
Did you mean: 

Checkout: Add green border if validation is successful.

SOLVED

Checkout: Add green border if validation is successful.

In the shipping step in checkout i'm looking to show a green border around an input field if the validation is successful to show the user that information he filled in is ok.

 

I'm unsure on where I would do something like this. 

 

Screen Shot 2018-05-01 at 16.35.34.pngI don't need to add extra custom validation. Only need to know if the default validation succeeds and the field isn't empty if it's required. Can anyone point me in the right direction? Thanks in advance.

1 ACCEPTED SOLUTION

Accepted Solutions

Re: Checkout: Add green border if validation is successful.

Thanks, that works but to a certain extend so I ended up using this:

 

 

require([
    'jquery',
    'mage/validation'
], function ($) {

    return validationSuccess = function () {

    var el = $(event.target);

    }
});

And changed input.html

 

 

 

<input class="input-text" type="text" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    event: {
        keyup: validationSuccess
    },
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': noticeId,
        id: uid,
        disabled: disabled
    }
"/>

 

View solution in original post

6 REPLIES 6

Re: Checkout: Add green border if validation is successful.

You can add blur() event to checkout shipping form field using custom js script and check if any error is coming or not if not display any validation error based on that you can add remove class for specific element.

If Issue Solved, Click Kudos/Accept As solutions. Get Magento insight from
Magento 2 Blogs/Tutorial

Re: Checkout: Add green border if validation is successful.

But to what file would i connect that custom JS file?

Re: Checkout: Add green border if validation is successful.

When you say 'call those file in checkout page' do you mean adding it to the 'define' in shipping.js or?

Re: Checkout: Add green border if validation is successful.

I now have this, which is called in the shipping.js

 

require([
    'jquery',
    'mage/validation'
], function($){
    console.log('******** Validation File! ********');

    $('input').click(function() {
        console.log('******** Validation COMPLETE! ********');
    });
});

The first console.log gets printed but the second doesn't do anything on click.

Re: Checkout: Add green border if validation is successful.

Please keep below code and check,
require([
'jquery',
'mage/validation'
], function($){
console.log('******** Validation File! ********');

$('body').on('blur', '#shipping-new-address-form input', function () {
console.log('******** Validation COMPLETE! ********');
});
});
If Issue Solved, Click Kudos/Accept As solutions. Get Magento insight from
Magento 2 Blogs/Tutorial

Re: Checkout: Add green border if validation is successful.

Thanks, that works but to a certain extend so I ended up using this:

 

 

require([
    'jquery',
    'mage/validation'
], function ($) {

    return validationSuccess = function () {

    var el = $(event.target);

    }
});

And changed input.html

 

 

 

<input class="input-text" type="text" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    event: {
        keyup: validationSuccess
    },
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': noticeId,
        id: uid,
        disabled: disabled
    }
"/>