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>

我得到另一个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"
            }
    });
 });

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>

Jquery Validator为每个valid（）方法添加标签

1 个答案: