将文本框设置回默认样式

I have some jQuery that loops over form input elements and if it finds that they are empty, it sets their border-color to be red. When the submit button is clicked, it checks the elements again, and if there are elements with data, then I'm attempting to set the textbox back to it's original style.

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

I have tried using border-style: solid / none / initial and border-color: black but the box either ends up looking very bold, or having no border at all. Here is the code :

我尝试过使用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();
        }
    }

3 个解决方案

#1

If your using style sheets, this should work for resetting the input:

如果您使用样式表,这应该可以用于重置输入:

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

#2

Rather than directly set the border color using $(this).css('border-color', 'red'), create a class with a style of border-color: red and use $(this).addClass(className) and $(this).removeClass(className) to add and remove the styling.

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

function validateForm() {
    isValid = true;
    $('input[type="text"]').each(function () {
        if ($(this).val() === "") {
            $(this).addClass('redBorderClass');
            isValid = false;
            alert('Please fill a value in for : ' + $(this).attr('name'));
        }
        else {
            $(this).removeClass('redBorderClass');
        }
    });

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

#3

Using a class could help, and also possibly reduce your logic:

使用类可以帮助,也可能减少你的逻辑:

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 'errorClass' is

'errorClass'的位置

errorClass { border-color: #F00; }

#1