Checkout: Add green border if validation is successful.

[SannNL]

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. 

I 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.

[Rakesh Jesadiya]

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.

[SannNL]

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

[SannNL]

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

[SannNL]

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.

[Rakesh Jesadiya]

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! ********');
});
});

[SannNL · Accepted solution]

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
    }
"/>