使用 JavaScript 更改输入边框颜色不起作用

发布于 2025-01-01 00:15:31 字数 1185 浏览 0 评论 0原文

我已经阅读了一些关于 SO 的问题，我相信我正在做正确的事情，但它仍然不起作用！

我使用的是普通的旧 JavaScript，因为它是遗留代码，但如果必须的话，我也可以使用 jQuery。

我的表单的形式如下（没有双关语）：

<form action="submit.php" method="post" name="myForm" onsubmit="return validateInfoForm()">
    <input type="text" class="boxes" name="Forename" id="Forename" placeholder="Forename" />
    ....
</form>

function validateInfoForm()
{
    var b=document.forms["myForm"]["Forename"].value;
    var c=document.forms["myForm"]["Surname"].value;
    var f=document.forms["myForm"]["Postcode"].value;
    var g=document.forms["myForm"]["Telno"].value;
    var h=document.forms["myForm"]["Email"].value;

    if (b==null || b=="")
{
    alert("Enter Forename");
    document.getElementById('Forename').style.borderColor = "#FF0000";

   // before it was using document.forms["myForm"]["Forename"] as the selector but I changed it to try and get it to work. It was also doing .focus() rather than changing the border colour.

    return false;
}

没有收到任何错误，我只是收到警报框，然后我的光标放置在输入中，我也没有收到想要，因为它删除了占位符，这就是为什么我删除了 .focus() 并尝试更改颜色。

有什么想法吗？

原文

I've read a few questions on SO and I believe I am doing the right thing but it's still not working!

I am using plain old JavaScript as it's legacy code but if I have to I can probably use jQuery too.

I have my form which is of the form(no pun intended):

<form action="submit.php" method="post" name="myForm" onsubmit="return validateInfoForm()">
    <input type="text" class="boxes" name="Forename" id="Forename" placeholder="Forename" />
    ....
</form>

function validateInfoForm()
{
    var b=document.forms["myForm"]["Forename"].value;
    var c=document.forms["myForm"]["Surname"].value;
    var f=document.forms["myForm"]["Postcode"].value;
    var g=document.forms["myForm"]["Telno"].value;
    var h=document.forms["myForm"]["Email"].value;

    if (b==null || b=="")
{
    alert("Enter Forename");
    document.getElementById('Forename').style.borderColor = "#FF0000";

   // before it was using document.forms["myForm"]["Forename"] as the selector but I changed it to try and get it to work. It was also doing .focus() rather than changing the border colour.

    return false;
}

Not receiving any errors, I simply get the alert box and then my cursor is placed inside the input, which I also don't want since it's removing the placeholder which is why I have removed the .focus() and attempting to change the colour instead.

Any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烧了回忆取暖 2025-01-08 00:15:31

我猜它正在改变边框颜色，但因为该元素没有边框，所以没有应用它尝试：

 document.getElementById('Forename').style.border = "1px solid #ff0000";

I'm guessing it's changing the border color, but because the element doesn't have a border it's not applying it try:

 document.getElementById('Forename').style.border = "1px solid #ff0000";

回复收藏 0 原文

魂牵梦绕锁你心扉 2025-01-08 00:15:31

也尝试设置边框宽度和样式。

回复收藏 0 原文

女皇必胜 2025-01-08 00:15:31

我遇到了同样的问题，经过多次搜索，我有了这个解决方案，尝试一下......

// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('#target {color: darkseagreen}');

// Apply the stylesheet to a document:
document.adoptedStyleSheets = [sheet];

它对我有用。

I had the same issue, after much searching, i have this solution, try it...

// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('#target {color: darkseagreen}');

// Apply the stylesheet to a document:
document.adoptedStyleSheets = [sheet];

It works for me.

回复收藏 0 原文

~没有更多了~