更改输入字段的类答案

【问题标题】：Change the class of a input field更改输入字段的类
【发布时间】：2011-09-30 07:44:03
【问题描述】：

对不起。换个说法：

如果输入字段为空，我希望js更改为输入字段的类；这是我检测空字段的代码：

function validateForm()
{
    var ctrl = document.forms["form1"]["username"];
    var x=ctrl.value;
    if (x==null || x=="") {
////////////CHANGE INPUT CLASS/////////////   
    }
    else {
    document.getElementById('username').style.backgroundColor="#FFFFFF";      
    }
}

我将不得不 css 类：

.inputfield {
background-color:white;
}

.inputfieldempty {
background-color:red;
}

【问题讨论】：

这个问题有四个独立的任务。哪一个给你带来麻烦？到目前为止你有什么代码？
我有一个将内容发布到 php 进程页面的表单。我希望它仅在所有字段都填满时发布。当一个字段为空时，它应该改变 bgcolor
如果你想要一个简单的方法（而不是学习它是如何完成的），你可以使用jQuery validation plugin
我认为处理代码sn-ps会更容易更快...
This post 可能包含您正在寻找的答案。

标签： javascript css forms validation input

【解决方案1】：

为了防止提交，您需要为表单的 onsubmit 事件调用一个函数（例如onsubmit="return checkFields()"。在该函数中，您将执行验证并根据该函数返回 true 或 false。如果该函数将返回 false，则表格不会发布。

作为验证的一部分，当您确定某个字段的值为空时，您也可以进行所需的 css 更改。我不知道您是否使用 vanilla javascript 或 jQuery 等库来提供更具体的细节。

【讨论】：

我是将其添加到
还是中？如果是真的你怎么告诉它发布
您将其添加到表单元素中。简单地返回 true 或 false 将使表单提交或不提交。

【解决方案2】：

查看 this tutorial 了解出色的 jQuery Validation 插件，该插件完全符合您的需求，您甚至不必担心跨浏览器问题。

如果你不想使用插件，我仍然建议至少使用 jQuery。 Here's another tutorial 完成了所有必要的步骤。

【讨论】：

【解决方案3】：

这篇文章应该注意添加你的 CSS 类：Change an element's class with JavaScript

这个帖子应该注意防止表单提交：https://developer.mozilla.org/en/DOM/event.preventDefault

【讨论】：