提交失败后更改输入字段的颜色答案

【问题标题】：Change color of input field after the submit has failed提交失败后更改输入字段的颜色
【发布时间】：2015-08-11 13:05:59
【问题描述】：

我想知道是否有办法在您单击提交按钮后更改输入字段的颜色，例如在输入无效时将其颜色更改为红色。由于我当前的 css 代码，我当前的解决方案在开始时将每个输入标记为红色。

input:invalid {  
  background: #FF3300;  
}

我希望输入字段保持白色，直到您点击提交按钮，然后正确的输入应变为绿色，而错误的输入应变为红色。
提前致谢。

小例子。
HTML：

<html><!DOCTYPE html>
    <head>
      <title>Example</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <script type="text/javascript" src="javascript.js"></script>
    </head>
    <body>
         <form action="">
            <input type="text" id="name" class="input"  maxlength="50"  pattern="[A-Za-z\\s]*" placeholder="Name" required>
            <input type="submit" value="Submit" id="Submit">
        </form>
    </body> 
</html>

CSS：

input:invalid {
  background: #FF3300;
}

input:valid {
  background: lightgreen;
}
#Submit{
    background: lightgrey;
}

【问题讨论】：

表单中需要任何 JavaScript 逻辑。这个 jquery 库可以帮助你Click
我还没有使用过 jquery，所以在使用任何库之前我必须先研究一下。还有其他方法吗？

标签： html css input colors submit

【解决方案1】：

试试这个：

<!DOCTYPE html>
   <html>
       <head>
           <title>Say I'm a duck</title>
       </head>
       <body>
            <script>
               function verify(){
                   var value = document.forms[0].item.value; // or replace document.forms[0].item by document.getElementById('name')
                   var objective = "I'm a duck";
                   if(objective != value){
                       document.forms[0].item.style.color="#FF3300";
                       return false;
                   } else {
                       document.forms[0].item.style.color="lightgreen";
                   }
                   return true;
               }
           </script>
           <form action="" method="" onSubmit="verify();">
               <input type="text" name="item" id="name" class="input"  maxlength="50"  pattern="[A-Za-z\\s]*" placeholder="Name" required>
           <input type="submit" value="Submit" id="Submit">
           </form>
       </body>
   </html>

onSubmit 属性会调用 js verif() 函数。

在 javascript 中，调用 DOM 对象.style.property = value;将改变对象样式。

W3School js change css

管理员 XVII

【讨论】：

【解决方案2】：

您可能在标签输入中错误地设置了参数。即：类型、要求、模式。在 Internet 上阅读有关 HTML5 表单验证的更多信息。 CSS选择器你是对的。请注意，此方法仅适用于支持 HTML5 的现代浏览器，在较旧的浏览器中，您必须使用 JS 库来验证表单或用 PHP 编写一个小脚本。

【讨论】：

我使用了所有这些标签。如果您想尝试一下，我添加了一个小示例。
试试 pattern="[a-zA-Z]+" 和 css .input:invalid { border: 2px solid red; }
并没有真正解决问题，至少现在看起来更讨人喜欢了。
@PeterFlash 据我了解，这非常适合您的情况。按下任何键之前的 CSS 会绘制黑色边框。在表单中按下任何键后，输入标签上的小 JS 删除虚拟属性，CSS 开始通过 :valid\:invalid 选择器进行验证。 html:<input type="text" def="null" id="name" maxlength="50" pattern="[a-zA-Z]+" onkeydown="this.removeAttribute('def');" required>css:#name:invalid {border: 2px solid red;} #name[def='null'] {border: 1px solid black;} #name:valid {border: 2px solid lightgreen;}（按此顺序使用）。如果我帮助了你，请按回复是有用的并被接受。

【解决方案3】：

您要求的是 angularJS 功能之一。

但是要回答您的问题...首先我假设您正在使用 ajax，否则重新加载将不再显示输入。如果是这样，当您从调用中收到错误时，您可以添加一个 .invalid 类，因此您需要这个：

input.invalid {  
  background: #FF3300;  
}

关于 ajax 错误：

document.querySelector(".targetInput").classList.add("invalid");

【讨论】：

我没有使用 ajax，这只是一个熟悉 HTML 的小示例。我以前从未使用过它。一切都在重新加载时消失，但它的目的是这样工作。
那么假设验证器工具抛出了错误。它会以同样的方式工作

【解决方案4】：

您是否考虑过使用 JQuery 验证插件？

$("form").validate({
    errorClass: "my-error-class",
    validClass: "my-valid-class",
    rules: {
            test: {
                required: true,
                minlength: 12
            }
    }
});

http://jsfiddle.net/8vQFd/

【讨论】：