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

Peter Flash 发表于 Dev

彼得·Flash

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

管理员XVII

试试这个：

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