表單驗證使用Javascript - 極品紅「*」

我有一個簡單的公式推這樣的例子：表單驗證使用Javascript - 極品紅「*」

姓：INPUTFIELD
名字：INPUTFIELD

提交按鈕

This form shou ld用javascript驗證，如果我點擊submitbutton。如果驗證失敗（例如我forgott輸入姓名）我希望有一個紅色的「*」之後的「名字」和以前生產inputfield，就像這樣：

姓：* INPUTFIELD
名字：INPUTFIELD

提交按鈕

哪個是cleare ST的方式來解決這個問題在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元素的自動換行...

來源

2013-12-18 user3057184

您可能希望在innerHTML中放置一個範圍來設置* red的樣式。如果您也需要驗證幫助，則需要查看事件監聽器（可能是onclick監聽器）。 – bbill

非常感謝;） – user3057184

當然！下面的答案有代碼，所以如果你認爲它也有幫助，你應該標記一個。 – bbill

將一個跨度在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; 
}

來源

2013-12-18 21:24:58

您可能需要使用CSS + DOM來實現這一點。

1）創建在頁面加載星號標記，但留下不可見通過包裝它使用display:none;一個span標記內 - 這樣的：

<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屬性。你在操縱可見性，而不是內容。;）

來源

2013-12-18 21:27:30 OnoSendai

地方跨度在你的星號標記在你的innerHTML輸出和風格化與CSS：

JS：

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

我不知道，如果你需要逃跑不到和大比標籤，但如果你這樣做，它只會是<和>

來源

2013-12-18 21:27:31 Phlume

表單驗證使用Javascript - 極品紅 「*」

回答

相關問題

表單驗證使用Javascript - 極品紅「*」