0

ツールチップで Bootstrap 検証を使用します。フォーム (ユーザー名、パスワード) を検証したいのですが、ボタン (btn-login) が設定されていません (NULL を返します)。PHPコード（上記）でループすることはありません。これは私のコードです - HTMLとJS

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Register form</title>
  <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/css/formValidation.min.css"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>

</head>
<body>
  <div id="message"></div>

  <form id="tooltipContainerForm" class="form-horizontal" method="post">
    <div class="form-group">
      <label class="col-xs-3 control-label">Full name</label>
      <div class="col-xs-3">
        <input type="text" class="form-control" name="username" placeholder="User name" />
      </div>
      <div class="col-xs-3">
        <input type="password" class="form-control" name="password" placeholder="Password" />
      </div>
    </div>

    <div class="form-group">
      <div class="col-xs-9 col-xs-offset-3">
        <button type="submit" class="btn btn-default" name="btn-login" id="btn-login">Validate</button>
      </div>
    </div>
  </form>

  <script>
  $(document).ready(function() {
    $('#tooltipContainerForm')
    .formValidation({
      framework: 'bootstrap',
      err: {
        container: 'tooltip'
      },
      icon: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        username: {
          validators: {
            notEmpty: {
              message: 'The first name is required and can not be empty'
            }
          }
        },
        password: {
          validators: {
            notEmpty: {
              message: 'The last name is required and can not be empty'
            }
          }
        },
      }
    })
    .on('success.form.fv', function(e) {

      e.preventDefault();

      var $form = $(e.target),
      fv    = $form.data('formValidation');
      var myData = $("#tooltipContainerForm").serialize();
      alert(myData);

      $.ajax({
        url: "loginHandler.php",
        type: 'POST',
        data: myData,
        success: function(result) {
          if(result=="ok"){
            $("#message").fadeIn(1000, function(){
              $("#message").html('<div class="alert alert-success alert-dismissible fade in" role="alert" >'+
              '<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
              '<span aria-hidden="true">&times;</span></button><strong>Success login!</strong> You have been successfully logged in. Redirecting in 2 seconds..</div>');
            });
            setTimeout(' window.location.href = "home.php"; ',2000);
          }
          else {
            $("#message").fadeIn(1000, function(){
              $("#message").html('<div class="alert alert-danger alert-dismissible fade in" role="alert" >'+
              '<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
              '<span aria-hidden="true">&times;</span></button><strong>Something wrong!</strong> '+result+'</div>');
            });

          }
        }
      });
    })
    .on('err.field.fv', function(e, data) {

      var $icon = data.element.data('fv.icon'),
      title = $icon.data('bs.tooltip').getTitle();

      $icon.tooltip('destroy').tooltip({
        html: true,
        placement: 'right',
        title: title,
        container: 'body'
      });
    });


  });
  </script>



</body>
</html>

これは私の loginHadler.php です。それが決して行かない場合に。

<?php
require("functions.php");
session_start();
var_dump($_POST['btn-login']);
if(isset($_POST['btn-login'])){
  $db = getDb();
  //validate($_POST['user'], $db);
  $passwordHash = sha1($_POST['password']);
  $query = getSelectQuery("users","username",$_POST['username']);
  $result = mysqli_query($db, $query);
  if ($result) {
    $row = $result->fetch_array(MYSQLI_ASSOC);
    if($row['password']==$passwordHash){
        echo "ok";
        $_SESSION['username'] = $row['username'];
    } else {
      echo "Username or password does not match.";
    }

  } else {
    echo mysqli_error($db);
  }

}
4

3 に答える 3