HTML元素的類的動態變化無效

我寫了一個包含表單的HTML頁面。形式由一個PHP頁面檢查通過在HTML頁的開頭有：HTML元素的類的動態變化無效

<script type="text/javascript" src="js/mootools/core.js"></script> 
<script type="text/javascript" src="js/mootools/more.js"></script> 
<script type="text/javascript" src="js/formcheck/lang/fr.js"> </script> 
<script type="text/javascript" src="js/formcheck/formcheck.js"> </script> 

<script type="text/javascript"> 
    window.addEvent('domready', function(){ 
     new FormCheck('form'); 
}); 
</script>

的問題是，我動態添加類的HTML元素的頁面在一定條件下，加載後。

以下HTML頁面的代碼示例是一個單選按鈕，用於瞭解頁面的訪問者是否有汽車。如果她/他的答案是肯定的，那麼就會添加'validate ['required']'類以選擇汽車的元素數量，這意味着用戶必須選擇一個值（汽車數量）。否則，用戶沒有汽車，然後不必選擇，並接受並傳輸默認的空字符串。

<input type="radio" name="cars" value="yes" onclick="document.getElementById('number_of_cars').setAttribute('class','validate[\'required\']');">oui 
<input type="radio" name="cars" value="no" checked="checked">no 



<label>How many cars do you have ? :</label>   
<select name="number_of_cars" id="number_of_cars"> 
<option value="">-</option> 
<option value="01" >01</option> 
<option value="02" >02</option> 
<option value="03" >03</option> 
</select>

我的問題是，當我使用Firebug檢查HTML元素具有類在需要的時候「驗證[」需要「]」（單選按鈕是），但PHP頁面似乎並沒有工作，因爲即使用戶沒有選擇多輛汽車，表格也會被傳送。

我的猜測是我的HTML頁面的Javascript部分的事件「domready」不合適，但我不知道該怎麼做。

編輯：我已將javascript元素更改爲onChange，但它也不起作用。

來源

2011-08-18 Bruno

後的形式發送PHP將檢查形式 - 或者你正在使用一些框架來做到這一點？ – SergeS

您能否澄清問題出在哪裏？是否你的客戶端驗證腳本不工作（如果是這樣，我們需要更多的細節）？驗證應該在表單的onsubmit處理程序中發生，如果它尚未。無論哪種方式，儘管您的PHP腳本應該能夠處理無效輸入，以避免由於客戶端驗證失敗（例如，沒有JavaScript）或利用任何錯誤導致事情失敗的惡意攻擊導致的任何潛在問題。 – Chris

是的我正在使用某種框架，因爲在表單中不適合的字段的警報在開始時使用我的HTML頁面的腳本顯示，我認爲這裏的問題是隻檢查頁面的事件只有一次，而不是每次發生變化。 – Bruno

window.addEvent（'domready'）是MooTools library的一部分，它不是Javascript本身的一部分。在我看來，你並沒有使用它，所以你應該將MooTools腳本添加到你的html中，或者使用onLoad事件。

MooTools是使用

編輯

要麼，你與FormCheck對象發送的值是錯誤的。 FormCheck需要一個ID，而不是一個標記名，所以你至少應該有地方：

<form id="myForm"> 

new FormCheck('myForm');

編輯2

如果你已經在使用MooTools的，最好使用內置的事件處理程序。由於跨瀏覽器問題，應避免像onClick和onLoad這樣的直接方法。 MooTools負責這一點。

<script type="text/javascript"> 
    window.addEvent('domready', function(){ 
    $('cars').addEvent('click', function() { 
     $('number_of_cars').addClass("validate['required']"); 
    }); 

    new FormCheck('form'); 
    }); 
</script>

MooTools的需要ID的這個工作，所以：

<input type="radio" name="cars" id="cars" value="yes">

編輯3

而且仔細閱讀FormCheck的文檔。它們含有大量的示例代碼：http://mootools.floor.ch/en/demos/formcheck/

文檔：http://mootools.floor.ch/docs/formcheck/files/formcheck-js.html

希望這有助於

來源

2011-08-18 08:38:35 Luwe

對不起，我沒有把我用過的MooTools。我相應地更正了我的代碼。 – Bruno

我已經編輯了我的答案與另一種可能性。 – Luwe

我試圖把我的表單的id放在新的Formcheck中，但它不起作用。對於你的第一個建議（onLoad事件），頁面上的變化是動態的，onLoad如何工作？ – Bruno

HTML元素的類的動態變化無效

回答

相關問題