个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 03:16:57 25 4
gpt4 key购买 nike

首先祝大家新年快乐!

我尝试制作一个表单，其中开头的复选框(文本)(调用函数，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>

最佳答案

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

查看我们的方法 HTML5 Form Validity有效。

<!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 - 文本框不会改变 JavaScript 中的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59547524/

25 4 0
文章推荐： c++ - 将 float 转换为 int 时的奇怪行为
文章推荐： c++ - 用于#include 和其他文件的不同路径
文章推荐： c++ - 为什么我的 C++ Winsock 服务器无法从客户端接收数据？
文章推荐： javascript - setTimeout 循环等待另一个 setTimeout 循环
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com