0

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);
            }
        });
    }

1 Answer 1

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);
        }
    });
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.