javascript - 如何在不使用内联 CSS 的情况下使用彩色文本框(红色/绿色)进行 Javascript 表单验证?

标签 javascript forms function validation

所以我做了一个 Javascript 表单验证,如果表单中没有写入任何内容,我会收到一条警报消息。我想要一个彩色(红色/绿色)文本框,而不是警报消息。当您未在其中写入任何内容并尝试提交时,您会看到一个带有消息的红色框。当您写下需要编写的内容并提交时,您会看到一个绿色框。

function validateFormC() {
  let x = document.forms["contactForm"]["name_contact"].value;
  if (x === "") {
   alert("Don't forget to write down your name!");
  return false;
  }

我已经知道如何用 html 制作彩色复选框。我需要知道如何使用 Javascript 来完成学校项目。但重要的是我不使用内联 css。任何帮助将不胜感激,谢谢。

最佳答案

您可以在 CSS 中创建类选择器:

.red-input {
  border: 1px solid red;
}

然后在 JavaScript 中,您可以选择该元素并向其中添加该类:

// With Vanilla JavaScript
document.getElementById('input_id').classList.add('red-input');

// With jQuery
$('#input_id').addClass('red-input')

关于javascript - 如何在不使用内联 CSS 的情况下使用彩色文本框(红色/绿色)进行 Javascript 表单验证?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54578412/

相关文章:

javascript - 是否可以在不循环的情况下在其父节点中获取元素的数字索引?

c# - 如何在 Application.Run(form1) 执行时隐藏 form1?

jquery 滑动切换作为表单复选框

php - 使用 PHP 验证的定位错误联系表单

mysql - mysql workbench 8.0中将列中每个单词大写的函数

mysql - 是否可以将 COUNT() 与 SELECT in HAVING 子句的单个结果进行比较?

javascript - jQuery 几乎赢得了我 - UI 自动完成 "data undefined"

javascript - 如何才能有一个仅在移动设备上显示的可折叠按钮?

javascript - 为什么 React 组件构造函数中的 console.log(super) 会抛出错误?

Javascript:像函数一样调用对象