时间戳

首页 > 解决方案 > 在缺少的字段上以红色突出显示或点击

javascript - 在缺少的字段上以红色突出显示或点击

问题描述

我试图在提交时以红色突出显示一个文本框，然后在用户输入文本并点击离开时将其恢复为黑色。这根本没有效果。我究竟做错了什么？

 <style>
  :required {
    border-color: #FF0000;
  }
</style>

 $(document).ready(function ()
  {
  var email = $('#Email').val();

  if (!email || email === "") {
   document.getElementsByClassName("Email").className = document.getElementsByClassName("Email").className + " 
  required"; 
  }
  else {
    document.getElementsByClassName("Email").style.border = "1px solid black";
   }
            

  }

@using (Html.BeginForm(...)
{
   <div class="form-group row Email"  id="Email">
   @Html.TextBoxFor(model => model.Email, new { placeholder = "Enter your email", @class = "form- 
  input" })
  </div>
 

 <input type="submit" name="submitButton" id="submitButton" class="form-input"/>
}

标签： javascriptasp.net-mvc

解决方案

您试图通过 id Email 获取元素，但您的 div 没有“Email” id，它是一个类。

代替：

let element = document.getElementById("Email")

你可以使用这个：

let element = document.getElementsByClassName("Email")[0]

您也可以向您的 div 添加一个 id 属性并将其设置为“电子邮件”

<div class="form-group row Email" id="Email">
   @Html.TextBoxFor(model => model.Email, new { 
      placeholder = "Enter your email", 
      @class = "form-input"
   })
</div>

推荐阅读