Question

我第一次接触JQuery，更不用说javascript了。使用了大约20分钟，需要一点点帮助。我的javacript：!!!编辑！现在改为现在

function val_fade1() {
    $("#firstname").bind('keydown', function(){
        var firstnameCount = $(this).val().length;
    }
    $("#lastname").bind('keydown', function(){
        var lastnameCount = $(this).val().length;
    }
    $("#email").bind('keydown', function(){
        var emailCount = $(this).val().length;
    }
    $("#password").bind('keydown', function(){
        var passwordCount = $(this).val().length;
    }
    if(firstnameCount < 2) {
        $("#req_first").show("slow");
    } else if(lastnameCount < 2) {
        $("#req_last").show("slow");
    } else if(emailCount < 5) {
        $("#req_email").show("slow");
    } else if(passwordCount < 5) {
        $("#req_pass").show("slow");
    } else {
        $("#register1").fadeOut();
    }
}

所以现在我想要发生的事情就像是说你输入了你的名字而且它不到2个字符，我目前用CSS隐藏的标签（请输入更长的名字）会显示出来。以及其他字段（姓氏，电子邮件，密码）。但如果所有这些都填写正确，“register1”div将淡出。

以下是我的HTML部分，以防您需要它：

<label>First Name
    <label id="req_first">REQUIRED*<label> 
</label>
<input type="text" name="firstname" id="firstname" class="input-text2" />

<label>Last Name 
    <label id="req_last">REQUIRED*</label>
</label>
<input type="text" name="lastname" id="lastname" class="input-text2" />

<label>E-Mail Address 
    <label id="req_email">REQUIRED*</label>
</label>
<input type="email" name="email" id="email" class="input-text2" />

<label>Password 
    <label id="req_pass">REQUIRED*</label>
</label>
<input type="password" name="password" id="password" class="input-text2" />

CSS隐藏了REQUIRED *标签，就像这样：

<style>
#req_first {
    display:none;
}
#req_last {
    display:none;
}
#req_email {
    display:none;
}
#req_pass {
    display:none;
}
</style>

我对JS和JQuery非常非常新，所以如果你能告诉我如何使这项工作，我会非常好，我主要使用PHP并进行PHP验证，但我喜欢上诉如果有人决定关闭他们的JS，那么JQuery淡入淡出并且PHP可以备份。

非常感谢你们！ -Mike

Answer 1

首先纠正你的HTML和CSS，我已经创建了一个原型，这可能对你有帮助。

DEMO

从头开始进行JQuery验证

1 个答案: