Блог

У меня есть страница входа, где я могу получить имя пользователя и пароль через api. После успешного входа в систему также отображается сообщение об ошибке, как удалить. Вот моя скрипка. Помогите мне, как удалить сообщение об ошибке после успешного входа. Если пароль неверный, то должно появиться сообщение об ошибке.

HTML

 <form id="login">
                  <p class="text-danger d-none">Please enter a correct login and password.</p>
                  <div class="form-group pb-10">
                      <div class="input-group">
                         <div class="input-group-addon p-2">
                            <i class="fa fa-user icon"></i>
                         </div>
                        <input type="text" class="form-control" id="name" name="name" placeholder="Username" required>
                     </div>
                  </div>
                   <div class="form-group">
                      <div class="input-group">
                         <div class="input-group-addon p-2">
                            <i class="fa fa-lock icon"></i>
                         </div>
                       <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
                     </div>
                  </div>

                  <div>

                  <button type="submit" class="btn float-right login-btn">Login</button>
                </div>
               </form>
  

Скрипт:

  $(document).ready(function(){
    localStorage.removeItem('role');
    $(".login-error").hide();
    $("#login").on("submit", function (e) {
     e.preventDefault();
    var form_data = $('#login').serialize();
    var username=$("#name").val();
    var pwd=$("#password").val();
       $.ajax({
          url: "https://api.myjson.com/bins/nl8a0",
          type: "GET",
          dataType: "json",
          success: function (data) {
                console.log(typeof(data));
             var arr = data;
                arr.forEach(function(obj) {
                   console.log('name: '   obj.name);
                   console.log('password: '   obj.role);
                   var pass=obj.password; 
                   // var decryptedBytes = CryptoJS.AES.decrypt(obj.password, "password");
                   var bytes  = CryptoJS.AES.decrypt(pass.toString(), 'password');
                   var plaintext = bytes.toString(CryptoJS.enc.Utf8);
                   var role=obj.role;
                      if(role=="User"){
                         if(username==obj.name amp;amp; pwd==plaintext){
                         alert("New role");
                         }
                         else{
                            $("#login p").removeClass("d-none");
                         }
                      }
                      else{
                   if(username==obj.name amp;amp; pwd==plaintext){
                   alert("Login succes");
                   }
                   else{
                      $("#login p").removeClass("d-none");
                   }
                }
                })
          },
             error: function(data) {
             console.log(data);
       }
       });

 });
});
  

вы пропустили добавление удаленного класса d-none после успешного входа в систему.

  $("#login p").addClass("d-none");
  

Вы можете назначить контейнер сообщений по идентификатору и назначить сообщение в соответствии с результатом, используя этот идентификатор.
Попробуйте код ниже:

рабочая скрипка:
https://jsfiddle.net/ao2sd6e0/

ОБНОВЛЕНИЕ:
Как вы можете видеть, я добавил id "message" в <p> тег <p class="text-danger d-none" id="message"></p> , чтобы сделать его контейнером сообщения. Используя это id , мы можем вставлять сообщение всякий раз, когда вход в систему проходит успешно или нет.

HTML

 <div class="container mt-5">

  <div class="d-flex justify-content-center mt-150 height-3 ">
    <div class="p-2 text-white w25 shadow-left rounded-left bg-white">
      <div class="d-flex justify-content-center">
        <img class="img-height img-fluid mt-100" src="../img/logo.png" alt="">
      </div>
      <!-- <h1 class="text-center mt-90">SeedStalk</h1> -->
    </div>
    <div class="border-left nbrd w30 text-center p60 shadow-right rounded-right bg-white">
      <form id="login">
        <p class="text-danger" id="message"></p>
        <div class="form-group pb-10">
          <div class="input-group">
            <div class="input-group-addon p-2">
              <i class="fa fa-user icon"></i>
            </div>
            <input type="text" class="form-control" id="name" name="name" placeholder="Username" required>
          </div>
        </div>
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon p-2">
              <i class="fa fa-lock icon"></i>
            </div>
            <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
          </div>
        </div>

        <div>

          <button type="submit" class="btn float-right login-btn">Login</button>
        </div>
      </form>
    </div>
  </div>


  <h6>
    Username : admin<br>
    Password : admin
  </h6>

</div>   
  

В Javascript мы можем настроить отображение сообщения в <p> теге, используя getElementById() метод с .innerHTML свойством HTML.

document.getElementById(‘сообщение’).innerHTML = «Успех»

 document.getElementById('message').innerHTML = "Please enter a correct login and password"
  

Скрипт

 $(document).ready(function(){
        localStorage.removeItem('role');
        $(".login-error").hide();
        $("#login").on("submit", function (e) {
         e.preventDefault();
        var form_data = $('#login').serialize();
        var username=$("#name").val();
        var pwd=$("#password").val();
           $.ajax({
              url: "https://api.myjson.com/bins/qt7fk",
              type: "GET",
              dataType: "json",

              success: function (data) {
                    console.log(typeof(data));
                 // alert(JSON.stringify(data));
                 var arr = data;
                    arr.forEach(function(obj) {
                       console.log('name: '   obj.name);
                       console.log('password: '   obj.role);
                       var pass=obj.password;
                       var bytes  = CryptoJS.AES.decrypt(pass.toString(), 'password');
                       var plaintext = bytes.toString(CryptoJS.enc.Utf8);
                       // alert(plaintext);
                       var role=obj.role;
                          if(role=="User"){
                             if(username==obj.name amp;amp; pwd==plaintext){
                             alert("New role"); document.getElementById('message').innerHTML = ""

                             }
                             else{
                                document.getElementById('message').innerHTML = "" 
                             }
                          }
                          else{
                       if(username==obj.name amp;amp; pwd==plaintext){
                       alert("Login succes");
                       document.getElementById('message').innerHTML = " " 
                       }
                       else{
                          document.getElementById('message').innerHTML = "Please enter a correct login and password"
                       }
                    }
                    })
              },
                 error: function(data) {
                 console.log(data);
           }
           });

     });
    });