Question

我正在尝试验证表单，如果输入字段中没有文本，则会弹出错误图标...如果输入中有ANYTHING，则会弹出一个成功图标。没有使用真正的验证方法。您可以看到表单here。

正如您所看到的，当您在第一个字段中键入内容并按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中，为什么不使用具有“good”，“no good”和“blank”状态的sprite，只需在输入字段更改时更新验证元素的类。这样，验证元素的所有可能状态都是预先加载的，因此反馈是即时的，而不是在下载图像所需的第二个左右之后。

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

然后你可以这样做：

// 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中的所有元素。另外，我确定在某处有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'表示成功或失败。

jquery形式BASIC验证问题

4 个答案: