文本框不会改变 javascript 中的颜色

Question

首先祝大家新年快乐！

我尝试制作一个表单，其中的复选框（文本）在开始时（调用函数， verif() ），其中它们的颜色必须与用户输入的名称不同，颜色必须更改为白色，我也使用方法setCustomValidity建议用户在他（她）忘记的情况下填充框，但即使我没有收到必须填充框的错误消息。 不幸的是，我的计划看起来有错误，但我不知道那是哪里。

<section id="secty">
<h1 id="demo">Managing Form</h1>
<form id="usuer_register" name="usuer_register" method="post">

<table>
<tr><td>Name&#58;</td>
<td><input type="text" id="nam" name="nam"></td></tr>
<tr><td>Last name&#58;</td>
<td><input type="text" id="name1" name="name1"></td></tr>
<tr><td>Age&#58;</td>
<td><input type="text" id="age" name="age"></td></tr>
<tr><td><input type="submit" id="regist" name="regist"></td></tr>
</table>
</form>
</section>
<script>
        function start(){
                    var x=document.getElementById("nam");
                    var y=document.getElementById("name1");
                    x.addEventListener("input", verif, false);
                    y.addEventListener("input", verif, false);
                    verif();    
             }
               function verif(){

               if(x.value=="" && y.value==""){
               x.setCustomValidity("Enter Name or Lastname");
               x.style.background="#803ADD";
               y.style.background="#803ADD";

                              }
             else{
                   x.setCustomValidity("");  // this restart as default;
                   x.style.background="#FFFFFF";
                   y.style.background="#FFFFFF";

                }
        }
        window.addEventListener("load", start, false);
    </script>

Answer 1

这里有一堆人要重新工作。 查看下面代码中的 HTML、CSS 和 JavaScript 注释以获取详细信息，但重点是 HTML、CSS 和 JavaScript 已经提供了您正在寻找的大部分功能。 如果您只是将required添加到不能为空的input元素，您将获得自动有效性检查和样式。

查看我们的HTML5 表单有效性如何工作。

 <!DOCTYPE html> <html> <head> <title>Form Validation</title> <style> /* CSS provides valid and invalid pseudo-classes which will automatically kick in based on the validity of form elements */ .validate:valid { background-color:#fff; } .validate:invalid { background-color:#803ADD; } label { display:inline-block; width: 5em; } form > div { margin-bottom: .2em; } </style> </head> <body> <section> <h1>Managing Form</h1> <!-- Don't forget to fill in the action attribute of the form! --> <form id="usuer_register" name="usuer_register" method="post" action=""> <!-- Do not use tables for layout! They are only for displaying tabular data. --> <div> <!-- Use label elements with form fields for better accessibility. Now, clicking on the label text focuses the field. Also, type="text" is not required on textboxes as "text" is the default type. Lastly, just add the "required" attribute for automatic validity checking. --> <label for="fName">Name: </label><input id="fName" name="fName" class="validate" required> </div> <div> <label for="lName">Last Name: </label><input id="lName" name="lName" class="validate" required> </div> <div> <label for="age">Age: </label><input id="age" name="age"> </div> <div> <!-- Submit Buttons shouldn't have a name because they don't have any data that you would want submitted along with the form. --> <input type="submit"> </div> </form> </section> <!-- As long as your script element is the last element in the body, there is no need for a "start" function or a "load" event hander. The following code will just run when it is reached and at this point in the document all the HTML has been parsed. --> <script> // Use meaningfull variable names let fName = document.getElementById("fName"); let lName = document.getElementById("lName") // The inputs will be invalid initially, so flag them // that way from the start fName.setCustomValidity("Enter First Name"); lName.setCustomValidity("Enter Last Name"); fName.addEventListener("input", verif); lName.addEventListener("input", verif); function verif(){ // The field has recieved input, so the required validation // requirement has been met. this.setCustomValidity(""); } </script> </body> </html>

新年快乐！

文本框不会改变 javascript 中的颜色

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-12-31 19:38:33

文本框不会改变 javascript 中的颜色

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-12-31 19:38:33

解决方案1
0 已采纳 2019-12-31 19:38:33