Product validation form jquery

Question

I am having difficulties getting getting my form to work. I have it partially working. Fields which are required are coming up in red when not filled out. The problem is that they remain red even when they are filled out. I need to add a blur handler but I don't know where. Here is the code. Ideally I like to be able that once they fill it out the page moves to the next input field, but I imagine this might be too complex. Here is the code

initValidation: function () {

        var showError = function (message) {
            $('<div>').html($('#templateErrorMessage').render({
                message: message
            })).children().prependTo(document.body);
        };

        $(document.body).on('submit', 'form', function (e) {
            var form = $(this);
            var inputs = form.find(':input:visible, .custom-select:visible select').filter('.required-entry');
            var isValid = true;

            inputs.each(function (i, input) {
                input = $(input);

                var value = $.trim(input.val());

                input.closest('.form-row').toggleClass('has-error', !value);

            ///    $(input).blur ();

                input.blur( function() {
                    if (isValid)
                        prompt.removeClass('has-error', !value);
                });

                isValid = isValid && !!value;
            });

            if (!isValid) {
                e.preventDefault();
                showError('Please fill in required fields!');
                scrollTo(0, 0);
            }
        });
    }

Answer 1

initValidation: function () {
    var showError = function (message) {
        $('<div>').html($('#templateErrorMessage').render({
            message: message
        })).children().prependTo(document.body);
    };
    $(document.body).on('submit', 'form', function (e) {
        var form = $(this);
        var inputs = form.find(':input:visible, .custom-select:visible select').filter('.required-entry');
        var isValid = true;
        inputs.each(function (i, input) {
            input = $(input);
            var value = $.trim(input.val()); 
    input.observe('blur', function(e){
    if(!value){
        input.closest('.form-row').addClass('has-error');
    }else{
        input.closest('.form-row').removeClass('has-error');
    }
    });
            isValid = isValid && !!value;
        });
        if (!isValid) {
            e.preventDefault();
            showError('Please fill in required fields!');
            scrollTo(0, 0);
        }
    });
}