Jquery Validator为每个valid()方法添加标签

Jquery Validator add labels with every valid() method

本文关键字：方法 添加 加标签 valid Validator Jquery      更新时间：2023-09-26

我有一些jQuery验证器插件的问题。

让它在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>

得到另一个LABEL标签

另一个问题是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"
            }
    });
 });

Quote OP:

"每次我点击提交按钮，一个新的标签错误被添加到html…另一个问题是onfocus()或lostfocus()没有清理那些新的标签标签，每次我在应该需要的字段中输入一些字符时，错误不清除。"

我不确定你想用所有这些内联处理程序做什么，你的问题很不清楚。默认情况下，没有重复的错误标签，当字段中的数据变为有效/无效时，它们会自动切换。

如果你只是想要插件的默认功能，而你从来没有解释过它应该如何表现不同，我认为你太努力了。(你的代码是多余的，过于复杂，它打破了正常的行为)

回到基础:

演示: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>
相关文章：