Question

我有一个像这个例子的简单公式：

名字： INPUTFIELD
姓氏： INPUTFIELD

提交按钮

如果我点击提交按钮，此表单应使用javascript验证。如果验证失败（例如我忘记输入名字）我想在“名字”之后加一个红色的“*”并输入输入字段，如下所示：

名字：* INPUTFIELD
姓氏： INPUTFIELD

提交按钮

哪种方法可以在javascript中解决这个问题？我的实际解决方案是：

<p id="pFirstname">Firstname: &#160; <input type="input" name="firstname" id="firstnameid"></p> 

document.getElementById("pFirstname").innerHTML  = "Firstname* : &#160; <input type=\"input\" name=\"firstname\" id=\"firstnameid\">";</code>

但是我有问题，“*”不是红色。我想通过CSS处理这个问题。但在这里我只有整个“名字：INPUTFIELD”段......我的问题是p元素的自动换行......

Answer 1

像这样把HTML放在HTML中

Firstname:<span id="firstNameValid" style="color:red;"></span> <input type="input" name="firstname" id="firstnameid">

并且在javascript的验证功能中，如果验证失败，

var validChar = isValidated ? '' : '*';//If validated, clear * and if not display *
try{
    document.getElementById("firstNameValid").innerHTML = validChar;
}catch(e){
    document.getElementById("firstNameValid").innerText = validChar;
}

Answer 2

您可能希望使用CSS + DOM来实现此目的。

1）在页面加载时创建星号标记，但是使用span将其包含在display:none;标记内，使其不可见 - 如下所示：

<p id="pFirstname">
    Firstname:
    <span id='pFirstnameValMark' style='display:none;color:red;'> &#160;</span>
    <input type="input" name="firstname" id="firstnameid">
</p>

2）如果验证失败 - 显示它：

pFirstnameValMark.style.display='inline';

3）您可以再次隐藏它（例如，如果用户开始编辑该字段）：

pFirstnameValMark.style.display='none';

我使用内联样式来演示机制，但您可以通过将CSS定义合并到类中来改进解决方案。

单独保留InnerHTML属性。您正在操纵可见性，而不是内容。 ;）

Answer 3

在您的innerHTML输出中的星号周围放置span标签，并使用css：

对其进行样式化

JS：

document.getElementById("pFirstname").innerHTML  = "Firstname<span style=\"color:#900;\"> * <\\span> : &#160; <input type=\"input\" name=\"firstname\" id=\"firstnameid\">";

我不确定您是否需要转义Less Than和Greater Than标签，但如果您这样做，则只需<和>

使用Javascript进行表单验证 - 需要红色“*”

3 个答案: