Jquery를 만들려고하면 사용자 이름과 비밀번호 슬롯을 입력해야한다고 사용자에게 알립니다.

Jquery가 사용자 이름과 비밀번호 슬롯을 입력해야한다고 사용자에게 알리는 것을 시도합니다. 나는 사용자 이름이 입력되지 않았 음을 보여주는 코드를 만들 수 있지만 암호 섹션이 작동하지 않습니다. 여기에 내가 가진 것이있다.Jquery를 만들려고하면 사용자 이름과 비밀번호 슬롯을 입력해야한다고 사용자에게 알립니다.

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="style.css" type="text/css"> 
    <script src="script.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

    <title>Jquery</title> 
    </head> 
<body> 
    <script> 
     $(document).ready(function(){ 
      $("button").click(function(){ 
      var user = $("#username").val(); 
      if(user.length == ""){ 
       $("#username").css("border", "1px solid red"); 
       $("#error").html("Please Enter A Valid Username").css("color", "red"); 
       $("#error").css("text-align","center"); 
      }; 
     }); 
    </script> 
    <script> 
     $(document).ready(function(){ 
      $("#username").mousedown(function(){ 
      $("#username").css("border", "1px solid black"); 
      $("#error").html(" "); 
      }; 
     }); 
     ); 
    </script> 
    <div class="tee"> 
    <h1>Learning jQuery</h1> 
    <p>With Charles Agbakwu</p> 
    </div> 
     <center><table> 
      <tr><td>Username:</td></tr><tr><td><input id="username" name="username" type="text"></td></tr><br> 
      <tr><td>Password:</td></tr><tr><td><input id="password" name="password" type="password"></td></tr><br> 
      </table><br> 
    <button>Submit</button></center> 
    <h3 id="error"></h3> 
    <h3 id="error2"></h3> 
    </body> 
    <center><footer><p>Agbakwu &copy;-2016</p></footer></center> 
</html>

출처

2016-10-18 Charles Agbakwu

코드에 몇 가지 실수가있었습니다. 모든 기능이 제대로 작동하려면 모든 기능을 닫아야하며 암호 필드가 비어 있는지 감지 할 수있는 코드도 필요하지 않습니다.

귀하의 $(document).ready(function(){은 첫 번째 부분에서는 닫히지 않으며 두 번째 부분에서는 "준비 상태"도 닫아야합니다. 따라서 });에 가깝습니다.

나는 당신의 코드를 바로 잡고 jsfiddle을 만들었습니다. 여기에는 암호 필드에 대한 부분도 있습니다. 당신은 코멘트로 그것을 볼 것입니다.

작은 팁으로 두 개의 별도 $(document).ready 이벤트 또는 두 개의 서로 다른 <script> 태그가 필요하지 않습니다. 모든 것을 하나로 유지하십시오.

출처

2016-10-18 23:14:55

고마워요! 그것은 효과가 있었다. 나는 조금은 뇌물을 가지고 있었다. 암호 haha에 대한 기능을 추가하는 것을 완전히 잊었습니다. –

I made it a little better 

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="style.css" type="text/css"> 
    <script src="script.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

    <title>Jquery</title> 
    </head> 
<body> 
    <script> 
$(document).ready(function() { 
    $("button").click(function() { 
    var user = $("#username").val(); 
    var password = $("#password").val(); //define password variable 
    if (user.length === 0 || password.length == 0) { 

     $("#error").html("You Must Enter Both Username and Password").css("color", "red"); 
     $("#error").css("text-align", "center"); 

    }; 
if (password.length !== 0) { 
     $("#password").css("border", "1px solid black"); 
    }else{ 
     $("#password").css("border", "1px solid red"); 
    }; 
if (user.length !== 0) { 
     $("#username").css("border", "1px solid black"); 
    }else{ 
     $("#username").css("border", "1px solid red"); 
    }; 
     return false; 
    }); 

    $("#username").mousedown(function() { 
    $("#username").css("border", "1px solid black"); 
    $("#error").html(" "); 
    }); 
}); 
    </script> 
    <div class="tee"> 
    <h1>Learning jQuery</h1> 
    <p>With Charles Agbakwu</p> 
    </div> 
     <center><table> 
      <tr><td>Username:</td></tr><tr><td><input id="username" name="username" type="text"></td></tr><br> 
      <tr><td>Password:</td></tr><tr><td><input id="password" name="password" type="password"></td></tr><br> 
      </table><br> 
    <button>Submit</button></center><br> 
    <center><span id="error"></span><span id="error2"></spam></center> 
    </body> 
    <center><footer><p>Agbakwu &copy;-2016</p></footer></center> 
</html>

출처

2016-10-19 01:57:01

Jquery를 만들려고하면 사용자 이름과 비밀번호 슬롯을 입력해야한다고 사용자에게 알립니다.

답변

관련 문제