Question

所以，我有一个 jQuery Validation Plugin ，可以为我完成表格的整个验证过程。
它工作得很好，但是因为我已经在CSS中为<input />设置了border属性，所以当提交的表单无效时，边框不会变为红色 - 至少我认为它应该是这样，从我见过的演示和视频。

为了弥补这一点，我正在尝试使用onblur事件在JavaScript中创建一个函数。

也有效。但是，有一个问题：

你看，我把它设置为原来边框是简单的黑色，聚焦输入会导致边框将颜色改为橙色并变得更厚，所有都具有我也使用的过渡属性。登记/> 因此，当我将边框设置为原始颜色时 - 在红色之前，无论是黑色还是橙色 - 聚焦在它上面都不再改变颜色。现在，黑色保持黑色，橙色保持橙色，但仍然变得更厚。

我可能很困惑你，所以这里是代码：
HTML：

<input type="text" id="name" name="name" placeholder="Your Name" onblur="name_redder()" />

CSS：

#name {
    border: 1px solid black;
    transition: all .1s;
}
#name:focus {
    outline: none !important;
    border: 3px solid #F8CB18;
}

和JavaScript：

function name_redder() {
    var name_form = document.getElementById("mailSender");//#mailSender is the parent DIV.
    var name_label = document.getElementById("name-error");//this is the ID of the label that comes out to show the error text.
    var nameInput = document.getElementById("name");
    var labelStyle = getComputedStyle(name_label);
    if (name_form.contains(name_label)) {
        nameInput.style.borderColor="red";
    }
    if (labelStyle.display == "none") {
        nameInput.style.borderColor="#F8CB18";
    }
}

一两个注释：最初，<label>旁边显示的<input />不存在 - 如果代码中不存在 - 而是插件，如果表单无效，创造它。但是，当表格填写正确时，它不会简单地消失。其display属性变为none。

<小时/> 所以问题是 - 如何在第二个:focus内单独更改正常边框和if()边框，而不是仅仅编写nameInput.style.borderColor="#F8CB18";？ < p>

Answer 1

我在焦点和模糊处设置事件监听器，并使用参数

调用该函数

function name_redder(color) {
    var name_form = document.getElementById("mailSender");//#mailSender is the parent DIV.
    var name_label = document.getElementById("name-error");//this is the ID of the label that comes out to show the error text.
    var nameInput = document.getElementById("name");
    var labelStyle = getComputedStyle(name_label);
    if (name_form.contains(name_label)) {
        nameInput.style.borderColor="red";
    }
    if (labelStyle.display == "none") {
        nameInput.style.borderColor= color;
    }
}

并添加一个焦点监听器

focus="name_redder('green')"

使用JavaScript

1 个答案: