从JavaScript更改样式而不保存

当我想改变JavaScript的css样式时，我的站点出现了一个问题，它可以正常工作，但只能持续几秒钟

function validateForm() {
    var fname = document.getElementById('<%=UserFnameTextBox.ClientID%>');
    if (fname.value == "") {
        document.getElementById("WarnUserFnameTextBox").style.opacity = 1;
        document.getElementById('<%=UserFnameTextBox.ClientID%>').style.borderColor = "red";
        getElementById('<%=UserFnameTextBox.ClientID%>').focus;
    }
}

函数validateForm（）{
var fname=document.getElementById（“”）；
如果（fname.value==“”）{
document.getElementById（“WarnUserFnameTextBox”）.style.opacity=1；
document.getElementById（“”）.style.borderColor=“红色”；
getElementById（“”）.focus；
}
}

我也在使用Asp.net，这就是我为什么这样写ID的原因

---

我希望JS在用户输入文本框的时间内保存样式。

这里有很多东西：我建议您的

validateForm（）

函数在提交按钮上单击一次

onClick

触发，对吗？你的按钮有点像这个吗

<input type="submit" value="submit" onClick="validateForm()">

您还可以使用

jQuery

并禁用表单提交。只要输入字段中有空/无效字符，就可以处理每种样式并进行相应调整。我建议将其与-函数相结合。这样，每次用户释放密钥时，您都会进行检查，一旦您的输入有效，您就可以做出反应

以

jQuery

为例：

var $fname   = $('#<%=UserFnameTextBox.ClientID%>');
var $textBox = $('#WarnUserFnameTextBox');

$fname.on("input", function() {
    var $this = $(this);
    if($this.val() == "") {
        $textBox.show();
        $this.focus().css("border", "1px solid red");
    }
}); 

这是未经测试的，请随意指出我的错误，因为我现在无法检查。您可以围绕如何处理“错误处理”展开讨论，可以切换到

onKeyDown（）

或

change（）

，这取决于您的需要/用例

由于您的问题没有标记为

jQuery

，因此也可以看看mplungjan给出的答案，因为它使用的是原生JS，没有任何框架。

---

这可能是您想要的。它将停止表单的提交，并重新使用该字段，如果没有错误，则重新设置

---

它假定您正在提交一个表单，页面作为服务器响应重新加载。请注意，最后一行缺少

文档

和

（）

。就像@Teemu所说的：您的样式触发正确，但一旦提交表单，您的网页就会重新加载并返回到“默认”值，就好像从来没有触发过JS一样（因为它在“生命周期”中确实没有）。如果你想让它永久化，我建议你禁用提交按钮，只要有错误。这样，只要有错误，样式就可以使用。请先将返回结束设置为False，切勿以这种方式访问数据，始终将getElementById的返回值指定给临时变量并进行检查，在尝试访问它之前确保其有效，您的Id引用无效，至少第二个和第三个无效。@根据验证函数的调用方式，返回false可能有效，也可能无效。是否希望

var$fname=$（'#'）

和

$fname.on（“输入”，函数（）{if（$（this）.val（）==“”）{

-未设置键-未标记jQuery您一直在从jQuery对象创建jQuery对象。不需要感谢您指出@mplungjan！感谢。值得称赞的是。您没有jQuery标记也是对的。我也将链接到您的答案

var$fname=$（'#'），$textBox=$（'#WarnUserFnameTextBox'）；$fname.on（“输入”，function（）{var$this=$（this）；if（$this.val（）==“”）{$textBox.show（）；$this.focus（）.css（“边框”，“1px实心红色”）；}}）

-或者更好地切换文本框

var $fname   = $('#<%=UserFnameTextBox.ClientID%>');
var $textBox = $('#WarnUserFnameTextBox');

$fname.on("input", function() {
    var $this = $(this);
    if($this.val() == "") {
        $textBox.show();
        $this.focus().css("border", "1px solid red");
    }
}); 

$("#yourFormID").submit(function(e){
    return false;
});