簡體   English   中英

從輸入標記調用CSS樣式文件

[英]Calling CSS style file from input tag

我在客戶端創建一個表單,有一個JSP頁面,在服務器端我使用Java servlet來處理數據。 我想要做的是,如果有錯誤,我希望能夠傳遞一條錯誤消息,這將導致輸入在其下面獲得一條紅線表示錯誤。 我的代碼完美無缺:

<input type="email" name="email" id="email" value="${param.email}" class="validate" <c:if test="${ not empty emailError}">style="border-bottom: 2.5px solid red; "</c:if>>
<label for="email" data-error="${emailError }" data-success="">Email</label>

我想知道的是,有沒有辦法刪除style="border-bottom: 2.5px solid red; "並用css文件替換它。 我想這樣做的原因是因為我將擁有數百行具有該特定樣式的代碼,如果我想將樣式更改為其他內容我需要遍歷每個頁面並逐行替換所有內容。 那么我可以將這個樣式存儲在一個單獨的文件中,只需調用該文件來創建相同的效果嗎? 我這樣做是為了便於維護。

我還想注意,我不能只將它添加到樣式表中,因為所有輸入都會在它們下面有一條紅線,我只希望輸入顯示一條紅線,如果該特定輸入有錯誤。

我不確定你的JSP方式,檢查代碼的正確性。 我只想做的是:

  1. 創建一個名為.error的CSS類,並使用{border-bottom: 2px solid red;}定義它。 請注意, px始終是整數
  2. 其次,我將使用AJAX返回任何數據以驗證它們。

注意: ps:抱歉,我正在使用jQuery庫 ,這很棒,而你在OP中沒有說過。

讓我告訴你一個簡單的方法:

 $(function () { $("#numcheck").keyup(function () { $this = $(this); $.post("/path/to/check.jsp", function (res) { if (res != "OK") $this.addClass("error"); else $this.removeClass("error"); }); }); }); 
 * {font-family: 'Segoe UI';} .error {border-bottom: 2px solid red;} 
 <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <input type="text" id="numcheck" /> 

Praveen Kumar非常.error創建一個.error類。 我最終做的是:

<input type="email" name="email" id="email" value="${param.email}" class="validate" onclick="inputClicked('email')">
<label for="email" data-error="${emailError }" data-success="">Email</label>

<c:if test="${ not empty emailError}">
   <script type="text/javascript">
        javascript:error('email');
    </script></c:if>

和Javascript錯誤(...)方法:

<script>
window.error = function(name) {

  document.getElementById(name).style.borderBottom = "solid red";
}
</script> 

要刪除樣式:

<script>

function inputClicked(name){
      $("#"+name).removeAttr("style")
};
</script> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM