If an input is in focus or has a value, I want to add a class to all inputs parent .field div. For example on the product page review form or on the checkout page shipping form. If the input is in focus I would add an "active" class and if the input has a value I would add the class "hasavalue."
When I try to use jquery, nothing happens on the product page review form inputs or on the checkout page inputs.
Here's the jquery I am using:
requirejs(['jquery'],function($){
$(document).ready(function(){
$('.field input').focus(function () {
$(this).parent().parent().addClass('active');
}).blur(function () {
$(this).parent().parent().removeClass('active');
});
$('.field input').blur(function(){
if ( $(this).val() ) {
$(this).parent().parent().addClass('hasavalue');
} else{
$(this).parent().parent().removeClass('hasavalue');
}
});
});});
Do I need to use knockout? If so, how can I translate this simple jquery to work with all inputs in Magento?