Jquery Validator爲每個有效的（）方法添加標籤

Question

我對jQuery Validator插件有一些問題。

使它與Scriptaculous一起工作後，我決定擺脫它。

但我仍然有問題。

每次我點擊提交按鈕，一個新的標籤錯誤被添加到HTML。

這是所有的td標籤，

<td align="left" colspan="2"> 
<input class="clase_campo" onfocus="this.className='clase_campo_en_foco';" onblur="this.className='clase_campo';" id="CampoDatos" name="CampoDatos" type="text" value="" size="20" maxlength="6" aria-required="true" aria-invalid="true"><label for="CampoDatos" class="error">Debe ingresar un dato</label> 
</td> 

的我再次點擊提交：

<td align="left" colspan="2"> 
         <input class="clase_campo error" onfocus="this.className='clase_campo_en_foco';" onblur="this.className='clase_campo';" id="CampoDatos" name="CampoDatos" type="text" value="" size="20" maxlength="6" aria-required="true" aria-invalid="true"><label for="CampoDatos" class="error">Debe ingresar un dato</label><label for="CampoDatos" class="error">Debe ingresar un dato</label> 
      </td> 

，我得到另一個標籤的標籤。

另一個問題是onfocus（）或者lostfocus（）沒有清理那些新的標籤標籤，每當我在應該需要的字段中輸入一些字符時，錯誤都不清楚。

行爲與樣本不同。

也許我應該消除onblur和onfocus屬性來自輸入標籤。

最好的問候。

這是我的輸入按鈕

<input id="BotonAceptar" class="btn btn-sm btn-default" type="button" name="BotonAceptar" value="Aceptar" title="" onclick="this.disabled=true; /*formAgregarValor.CampoAccformAgregarValor.value='SUBMIT';formAgregarValor.submit();*/" onmouseout="this.style.fontWeight='normal';" onmouseover="this.style.fontWeight='bold';" style="font-weight: bold;"> 

這是我的驗證程序：

$(document).ready(function(){ 
    $('#BotonAceptar').click(function() { 
     if ($("#CampoDatos").valid() && 
      $("#CampoImporte").valid()) { 
      formAgregarValor.CampoAccformAgregarValor.value='SUBMIT'; 
      formAgregarValor.submit(); 
     }; 
     this.disabled=false; 
    }); 

    $("#formAgregarValor").validate({ 
      rules: { 
       CampoDatos: "required", 
       'CampoImporte': { 
        required: true, 
        number: true 
       } 
      }, 
      messages: { 
       CampoDatos: { 
        required: "Debe ingresar un dato" 
       }, 
       CampoImporte: "Debe ingresar un numero" 
      } 
    }); 
}); 

Answer 1

報價OP：

「每次我點擊提交按鈕新的標籤錯誤被添加到HTML ...另一個問題是，onfocus()或lostfocus()沒有清理那些新的標籤標籤，每當我在應該要求的字段中輸入一些字符時，錯誤都不清楚。「

我不確定你想要處理所有這些內聯處理程序，你的問題很不清楚。默認情況下，錯誤標籤不會重複，並且當字段中的數據變爲有效/無效時，它們會自動切換。

如果你只是想要插件的默認功能，而你從來沒有解釋它應該有什麼不同的表現，我想你太努力了。 （你的代碼是多餘的，過於複雜，它打破了正常的行爲）

回到最基礎的：

DEMO：http://jsfiddle.net/nK6f3/

我沒有內嵌的JavaScript在我的演示，我已經只有一個click處理程序。您只需要click處理程序，因爲您沒有使用真正的submit按鈕。

$(document).ready(function() { 

    $('#BotonAceptar').on('click', function(e) { // capture the <button> click 
     e.preventDefault();    // stop any default <button> action 
     $("#FormAgregarValor").submit(); // submit form (automatically validates) 
    }); 

    $("#FormAgregarValor").validate({ // initializes the plugin on your form 
     rules: { 
      CampoDatos: "required", 
      CampoImporte: { 
       required: true, 
       number: true 
      } 
     }, 
     messages: { 
      CampoDatos: { 
       required: "Debe ingresar un dato" 
      }, 
      CampoImporte: "Debe ingresar un numero" 
     } 
    }); 

}); 

正如你所看到的，HTML是非常基本的：

<form id="FormAgregarValor"> 
    <input name="CampoDatos" type="text" /> 
    <input name="CampoImporte" type="text" /> 
    <input id="BotonAceptar" type="button" value="Aceptar" /> 
</form>