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

Question

我想知道是否有办法在您单击提交按钮后更改输入字段的颜色，例如，如果输入无效，则将其颜色更改为红色。由于我当前的 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;
}

Answer 1

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

中编写一个小脚本

Answer 2

您要求的是 angularJS 功能之一。

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

input.invalid {  
  background: #FF3300;  
}

然后 ajax 错误：

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

Answer 3

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

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

http://jsfiddle.net/8vQFd/

Answer 4

试试这个：

<!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.属性 = 值；将更改对象样式。

W3School js change css

管理员 XVII

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

Change color of input field after the submit has failed

html

css

input

colors

submit