Question

我有一些循环在表单输入元素上的jQuery，如果它发现它们是空的，它会将它们的border-color设置为红色。单击提交按钮时，它会再次检查元素，如果有数据元素，那么我正在尝试将文本框设置回原始样式。

我尝试过使用border-style: solid / none / initial和border-color: black，但这个框子看起来非常大胆，或者根本没有边框。这是代码：

function validateForm() {
        isValid = true;
        $('input[type="text"]').each(function () {
            if ($(this).val() === "") {
                $(this).css('border-color', 'red');
                isValid = false;
                alert('Please fill a value in for : ' + $(this).attr('name'));
            }
            else {
                $(this).css('border-color', 'black');
                $(this).css('border-style', 'solid');
            }
        });

        if (isValid) {
            $('#contactForm').submit();
        }
    }

Answer 1

如果使用样式表，这应该可以用于重置输入：

$(input).attr('style', '')

Answer 2

使用类可能有所帮助，也可能减少你的逻辑：

function validateForm() {
    var formValid = true;

    $('input[type="text"]').each(function(){
        var $this = $(this);
        if ($this.val() === "") {
            $this.addClass('errorClass');
            formValid = false;
        } else {
            $this.removeClass('errorClass');
        }
    });

    if (formValid) {
        $('#contactForm').submit();
    } else {
        alert('Missing required fields.  Please review and try again.');
    }
}

where＆＃39; errorClass＆＃39;是

errorClass { border-color: #F00; }

Answer 3

不是使用warn直接设置边框颜色，而是创建样式为$(this).css('border-color', 'red')的类，并使用border-color: red和$(this).addClass(className)添加和删除样式。< / p>

$(this).removeClass(className)

将文本框设置回默认样式

3 个答案: