CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapdisplay
vasilis 123
vasilis 123

Reputation: 675

prevent overriding styles from changing css set styles

I have a register form made with bootstrap which I validate using ajax and php . If there is an error I display an error message inside my form as a <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;
}

When I submit my form I use ajax and php to check if input already exists . If it does then show the error message by removing the .hide class and adding the .show class

.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>

When this script is executed with intent to display the error , it does not appear but the .hide class is removed and the show class is added . By inspecting dev tools I see that the element style is overidden

enter image description here

By inspecting utilities.less I see the folowing :

enter image description here

So my .hide class is depracated because of the other class which is made from .less . How can I edit this and make my script work ?

Upvotes: 0

Views: 868

Answers (3)

vasilis 123
vasilis 123

Reputation: 675

.hide and .show where specific classes used in utilities.less By changing their names in my code and adding

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

the code worked

Upvotes: 0

Frederik Voordeckers
Frederik Voordeckers

Reputation: 1331

Can't you make your css selector more specific? The more specific the selector the higher the priority (as long as you don't use !important, and please don't start using it), this is one of the few cases you can use it because Bootstrap does it already.

You could use form .show and form .hide for specific form show and hide functionality and add the !important as well to make sure Bootstrap doesn't overwrite it.

Besides that, a few small quick wins:

  1. you might want to use a Ternary Operator for this.

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

  1. Write if(exists == true) as if(exists)

  2. Extract $("#checkSubmitError") for unwanted document queries.

  3. And simplify the nested if/else

Upvotes: 1

Mohammad Esam
Mohammad Esam

Reputation: 502

try to mark your display property with !important flag.

also, make sure that you place your stylesheet at the bottom of your head element to prevent any other library from overriding your styles

Upvotes: 1

Related Questions