隐藏的div没有显示焦点

时间:2015-12-02 21:59:33

标签: javascript jquery html

我正在尝试使用javascript cheking在同一网站上进行简单的注册。我有一个隐藏的DIV的问题,当用户点击密码输入时它应该显示,它没有显示。 http://jsfiddle.net/mohamedyousef1980/wy2Lkscp/

这是javascript部分

$('input[type=password]').keyup(function() {

var pswd = $(this).val();

//pass lenght
if ( pswd.length < 8 ) {
  $('#length').removeClass('valid').addClass('invalid');
} else {
  $('#length').removeClass('invalid').addClass('valid');
}

//capital letter
if ( pswd.match(/[A-Z]/) ) {
    $('#capital').removeClass('invalid').addClass('valid');
} else {
    $('#capital').removeClass('valid').addClass('invalid');
}

//number
if ( pswd.match(/\d/) ) {
    $('#number').removeClass('invalid').addClass('valid');
} else {
    $('#number').removeClass('valid').addClass('invalid');
}

}).focus(function() {
$('#pswd_info').show();
}).blur(function() {
$('#pswd_info').hide();
});

和html:

<form class="form" action="http://google.com" method="post">
    <label name="nick">Nick:</label>
      <input type="text" id="username" name="username"/> <br>
     <label name="email">Email:</label>
      <input type="text" id="email"/> <br>       
    <label name="pass">Heslo:</label>
      <input type="password" id="pswd" name="pswd" />
<div id="pswd_info">
      <h4>Password must meet the following requirements:</h4>
      <ul>
          <li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
          <li id="number" class="invalid">At least <strong>one number</strong></li>
          <li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
      </ul>
    </div> <br>

pswd类:

#pswd_info {
    width:220px;
    padding:5px;
    background:#fefefe;
    font-size:.875em;
    border-radius:20px;
    box-shadow:0 1px 3px #ccc;
    border:1px solid #ddd; 
    display:none;
}

头脑中:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="script.js"></script>

2 个答案:

答案 0 :(得分:0)

您的代码有效。请检查输入选择器或输入名称是否存在。

或者只需在页面的相应部分添加:

<input type="password" name="yourname">

答案 1 :(得分:0)

有一个不同的问题,我身边的错误。 $(文件).ready(function(){没有覆盖整个脚本。抱歉浪费你的时间。