Блог

У меня есть форма регистрации, созданная с помощью bootstrap, которую я проверяю с помощью ajax и php. Если возникает ошибка, я отображаю сообщение об ошибке внутри моей формы как <span> .

register.php

 <form method = "POST" action = "insertUser.php" id ="registerForm">
  ...form inputs 
  <button type="submit" class="btn btn-success" id = "submitRegister" name="submit">Submit</button>
 <span id ="checkSubmitError" class= "hide text-danger"> Username already exists . Please insert a new username . 
 </span>


</form>
 

form.css

 .hide{
  display:none;
}

.show{
  display:block;
}
 

Когда я отправляю свою форму, я использую ajax и php, чтобы проверить, существует ли уже ввод. Если это произойдет, отобразите сообщение об ошибке, удалив .hide класс и добавив .show класс

.insertUser.php

 <?php

  if(isset($_POST['submitRegister'])){
    $alreadyExists = false //suppose user does not exist
    //connect to db and succesfully checks if user exists 
     $alreadyExists = true; //if he exists it is set to true  
    }

  }


  ?>
<script>  //change the class
  var exists = "<?php echo $alreadyExists; ?>";
  if(exists == true){
    if($("#checkSubmitError").hasClass("hide")){
      $("#checkSubmitError").removeClass("hide");
      $("#checkSubmitError").addClass("show");

    }else{
      $("#checkSubmitError").addClass("hide");
    }
  }
  
</script>
 

Когда этот скрипт выполняется с намерением отобразить ошибку, она не появляется, но класс .hide удаляется, а класс show добавляется . Проверяя инструменты разработчика, я вижу, что стиль элемента переопределен

Проверив, utilities.less я вижу следующее :

Итак, мой класс .hide удален из-за другого класса, созданного из .less . Как я могу отредактировать это и заставить мой скрипт работать?

попробуйте пометить свое свойство отображения флагом !important .

кроме того, убедитесь, что вы разместили таблицу стилей внизу элемента head, чтобы никакая другая библиотека не могла переопределить ваши стили

Разве вы не можете сделать свой css-селектор более конкретным? Чем конкретнее селектор, тем выше приоритет (пока вы не используете !important и, пожалуйста, не начинайте его использовать), это один из немногих случаев, когда вы можете его использовать, потому что Bootstrap уже это делает.

Вы можете использовать form .show и form .hide для определенных функций отображения и скрытия формы, а также добавить !important, чтобы убедиться, что Bootstrap не перезаписывает его.

Кроме того, несколько небольших быстрых побед:

1. возможно, вы захотите использовать для этого троичный оператор.

var exists = "<?php echo $alreadyExists; ?>";

2. Записать if(exists == true) как if(exists)
3. Извлечение $("#checkSubmitError") для нежелательных запросов к документу.
4. И упростить вложенные if / else

.спрятаться и.показать, где конкретные классы используются в утилитах.меньше, изменяя их имена в моем коде и добавляя

  else{
      $alreadyExists = true;
      echo "Username already exists "; //added 
    }
 

код сработал