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课程，因此您需要这样：

input.invalid {  
  background: #FF3300;  
}

关于ajax错误：

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

Answer 3

试试这个：

<!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

Answer 4

你考虑过使用JQuery验证插件吗？

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

http://jsfiddle.net/8vQFd/

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

4 个答案: