jQuery形式的BASIC验证问题

Question

我试图通过以下方式验证表单：如果输入字段中没有文本，则弹出错误图标...，如果输入中有任何内容，则弹出成功图标。 没有使用真正的验证方法。 您可以在此处查看表格。

如您所见，当您在第一个字段中键入某些内容并按Tab键时，该图标会正确弹出，但在第一个字段之后的任何字段上将无法使用。 这是我的jQuery：

<script type="text/javascript">
        $(function(){
        var field = document.getElementById('myFormField');
        var icon = document.getElementById('myIcon');

        field.onchange = function(){
            icon.src = this.value ? 'success.png' : 'fail.png';
        };
        });
</script>

我不知道如何在所有输入字段上执行此操作，但是我确定这是一个简单的解决方法。 我的HTML设置如下：

<input type="text" class="name" name="name" tabindex="1" id="myFormField"  /><img id="myIcon" />

id myFormfield触发图标，而类“ name”触发单击背景。 我以为我应该坚持上课，并尝试将其用作此解决方案的一部分。 有任何想法吗？

Answer 1

您并没有真正使用jQuery的功能。 尝试这样的事情：

$(function(){
    $(':text,:textarea').bind('change, blur',function(){
        $(this).next('img').attr('src',this.value ? 'success.png' : 'fail.png');
    });
});

Answer 2

您似乎刚开始使用jQuery。 好了，一旦您克服了学习曲线的前几步，就准备好动脑筋！ jQuery最强大的功能之一就是能够使用CSS选择器选择文档中的元素。

allinputs = $("input"); // Selects all input elements in your DOM
allrequiredinputs = $("input.required"); //Selects all input elements with a class of "required" in your DOM
allrequireds = $(".required"); //Selects all elements regardless of the tag name that have a class of "required"

此主题中还有其他答案可以很好地回答您的问题，因此在这里我不会尝试重复。 但是，我确实有一个建议可能对您更好。 为什么不使用表单状态更改时将不同的图像加载到DOM中的原因，为什么不使用状态为“好”，“不好”和“空白”的sprite并在输入字段更改时仅更新验证元素的类。 这样，验证元素的所有可能状态都会预先加载，因此反馈是即时的，而不是在一秒钟后才下载图像。

要了解有关精灵的更多信息，请阅读以下内容：

• http://css-tricks.com/css-sprites/
• http://www.alistapart.com/articles/sprites/

然后，您可以执行以下操作：

// CSS

.validation {
display: block;
float: left;
width: 10px;
height: 10px;
}
.validation.blank {
background: none;
}
.validation.good {
background: url(mysprite.gif) 0px 0px;
}
.validation.nogood {
background: url(mysprite.gif) 0px 10px;
}

// HTML

<form id="myForm" ... >
    <div id="contactform_namerow">
        <label for="name">Name</label><input type="text" id="name" name="name" />
        <div class="validation"></div>
    </div>
</form>

// jQuery

$(function(){
    $('#myform input, #myform textarea').bind('change',function(){
        if($(this).val == ""){
            $(this).siblings(".validation").addClass("nogood").removeClass("good");
        } else {
            $(this).siblings(".validation").addClass("good").removeClass("nogood");
        }
    });
});

您可以通过将表示每个字段应如何在每个输入元素上进行验证的类名进一步优化。 这样，您可以编写一些代码来验证电子邮件地址，方法是设置<input type="text" id="myemail" name="email" class="email">然后选择$('input.email')...来选择jQuery中的所有元素$('input.email')...另外，我确定某个地方有一个toggleClass函数，但是我懒得查找它。

但是...关于jQuery的最大优点是可用的插件数量庞大。 这是我个人的最爱： http : //bassistance.de/jquery-plugins/jquery-plugin-validation/

一旦您了解了如何正确使用该插件，我相信您会发现它可以完成您想要的所有操作！

希望这会有所帮助，并祝你好运！

伊恩

Answer 3

如果您使用的是jQuery，最简单的方法是：

$('input').change( function() {
  icon.src = $(this).val() ? 'success.png' : 'fail.png';
});

您可能希望将$('input')替换为更具体的选择器，例如$('input[type="text"]') 。

Answer 4

好吧，您正在使用jquery，但没有使用jquery。 你可能应该有类似

$("input").bind('blur', function(){
    if ($(this).val() == ''){
        $(this).siblings('.icon').attr('src', 'fail.png');
    }
    else{
         $(this).siblings('.icon').attr('src', 'success.png');
    }
}

把它放在你的$（function（）{}）里面； 块。

它的作用是检查输入失去焦点时文本是否为空白，然后将其设置为同级（具有class ='icon'的成功或失败。