入力が間違っているとdivを作ろうとしています

こんにちは、ユーザー名/パスワードが正しく入力されていないと、私のdivを揺さぶってみたいと思います。私が明確に試した方法はうまくいきません...私はそれがjavascriptを使って私のやり方と関係するかもしれないと思います。ありがとうございます。入力が間違っているとdivを作ろうとしています

HTML/PHP/JAVASCRIPT：

<?php 
    if(isset($_POST["submit"])) { 
     $link = mysqli_connect("localhost","root",""); 
     mysqli_select_db($link,"users"); 
     $count = 0; 
     $res=mysqli_query($link,"SELECT * FROM users WHERE username='$_POST[Username]' && password='$_POST[Password]'"); 
     $count=mysqli_num_rows($res); 
     if ($count > 0){ 
      header("location: /test.php"); 
     } 
     else { 
      ?> 
      <script type="text/javascript"> 
      document.getElementById("box").addClass("invalid"); 
      </script> 
      <?php 
     } 
    } 
?> 
<!DOCTYPE html> 
<head> 
    <link rel="stylesheet" type="text/css" href="home.css"> 
</head> 
<body> 
    <div id ="box"> 
    <img src="user.png"> 
    <form autocomplete="off" method="post" action="index.php"> 
    <input class="inputbox" type="text" name= "Username" pattern=".{2,15}" required title="2 to 15 characters" placeholder="Username "/> 
     <input class="inputbox" type="password" name ="Password" pattern=".{2,15}" required title="2 to 15 characters" placeholder="Password"/> 
     <input id = "submitbutton" type="submit" name="submit" value="Login" /> 
     </form> 
    </div> 
</body>

CSS：

body { 
     background-color:#42cbf4; 
    } 
    #box { 
     position:absolute; 
     top:45%; 
     left:50%; 
     width:300px; 
     height:375px; 
     transform:translate(-50%, -50%); 
     box-shadow:0px 0px 15px rgba(51, 96, 175,0.5); 
     border-radius:8px; 
    } 
    #box img { 
     position:absolute; 
     width:150px; 
     height:150px; 
     left:50%; 
     top:7%; 
     transform:translate(-50%, 0); 
    } 
    .inputbox { 
     margin-bottom:10px; 
     border:solid #333caf 1px; 
     border-radius:5px; 
     background-color:rgba(51, 60, 175, .05); 
     font-size:20px; 
    } 
    ::-moz-placeholder { 
     opacity:0.5; 
     color: #333caf; 
    } 
    :-moz-placeholder { 
     color: #333caf; 
     opacity:0.5; 
    } 
    ::-webkit-input-placeholder { 
     color: #333caf; 
     opacity:0.5; 
    } 
    #box form { 
     position:absolute; 
     left:50%; 
     transform:translate(-50%, 0); 
     bottom:5%; 
     text-align:center; 
    } 
    .inputbox:focus { 
     outline:none; 
    } 
    #box form { 
     z-index:5; 
    } 
    #box #submitbutton { 
     background-color:#333caf; 
     border:0; 
     margin-top:5px; 
     font-family:arial; 
     font-size:18px; 
     padding:7px 17px; 
     border-radius:5px; 
     color:rgb(202,202,202); 
     transition:color 0.2s ease-in-out, box-shadow 0.25s ease-out, background-color 0.2s ease-in-out ; 
    } 
    #box #submitbutton:hover { 
     background-color:rgba(51, 60, 175, .5); 
     color:white; 
     box-shadow:3px 3px 5px rgba(15,15,15,0.7); 
    } 
    #box #submitbutton:focus { 
     outline:none; 
    } 
    #box.invalid { 
     outline-color: red; 
     -webkit-animation: shake .5s linear; 
    } 
    @-webkit-keyframes shake { 
     8%, 41% { 
      -webkit-transform: translateX(-10px); 
     } 
     25%, 58% { 
      -webkit-transform: translateX(10px); 
     } 
     75% { 
      -webkit-transform: translateX(-5px); 
     } 
     92% { 
      -webkit-transform: translateX(5px); 
     } 
     0%, 100% { 
      -webkit-transform: translateX(0); 
     } 
    }

出典

2017-03-02 Tane T

jsfiddleを作成してリンクを共有してください –

jsfiddleでPHPとMySqlを使用する方法がわかりません。または空のjsfiddleを作るように私に依頼していますか？ –

ちょうどjsに条件を入れるデモの種類のフィドルを作成してください。 –

PHPのコード：

<?php 
     $invalid = false; 
     if(isset($_POST["submit"])) { 
      $link = mysqli_connect("localhost","root",""); 
      mysqli_select_db($link,"users"); 
      $count = 0; 
      $res=mysqli_query($link,"SELECT * FROM users WHERE username='$_POST[Username]' && password='$_POST[Password]'"); 
      $count=mysqli_num_rows($res); 
      if ($count > 0){ 
       header("location: /test.php"); 
      } 
      else { 
       $invalid=true; 
      } 
     } 
    ?>

はあなた</body>タグの前javascriptのコードの下に追加します。無効な$のためのチェックがあります設定されている場合、invalidクラスをボックスに追加します

出典

2017-03-02 04:42:39 Omi

ありがとうございました。） –

ドムは 'addClass' メソッドを持っていません。

'addClass'はjQuery要素メソッドです。

はこのようにそれを行う：

var box = document.getElementById("box"); 
box.className += ' invalid';

か：

$('#box').addClass('invalid');

出典

2017-03-02 03:53:28 alex374

あなたの敬意を借りてくれてありがとう...それは働くようには思われませんでした:( –

私はそれがjavascriptでエラーだと思っていませんが、それを使用しようとしている方法でより多く –

入力が間違っているとdivを作ろうとしています

答えて

関連する問題