产品验证表单jquery

Product validation form jquery

本文关键字:jquery 表单 验证      更新时间:2023-09-26

我有困难得到得到我的形式工作。我让它部分工作。需要填写的字段在未填写时显示为红色。问题是,即使填好了,它们仍然是红色的。我需要添加一个模糊处理程序,但我不知道在哪里。下面是代码。理想情况下,我喜欢能够一旦他们填写页面移动到下一个输入字段,但我想这可能太复杂了。下面是代码

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

我是这样解决的

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.one('focus change', function () {
                    input.closest('.form-row').removeClass('has-error');
                });
                isValid = isValid && !!value;
            });
            if (!isValid) {
                e.preventDefault();
                showError('Please fill in required fields!');
                scrollTo(0, 0);
            }
        });
    }