css, flexbox, javascript validation

Community feedback

• 

  Eric Salvi•1,350

  @ericsalviPosted over 3 years ago

  Hey Foued,

  If you are talking about the !important tag you have on the visibility CSS for the class, .is-invalid-text then you'll want to adjust the CSS Specificity so that it has a higher value.

  Currently the CSS for .is-invalid-text has a value of 010 but your hidden CSS for .section2 .card .error-text has a value of 030. So the goal is to make the .is-invalid-text to be just one value higher than the currently hidden error text. So 031 or 040 would be suitable.

  I use https://specificity.keegan.st/ and paste in my different selectors to see what the values are for each. And the most simple resolution would be to just change the .is-invalid-text to .section2 .card .error-text.is-invalid-text. This value is now 040 if you do that.

  Let me know if that is what you were needing and keep up the momentum!

  1

  ---

  

  Foued•655

  @Foued80Posted over 3 years ago

  Hi Ericsalvi , Thank you for the code review, i fixed all the !important by adding id to the card and used this to get higher specificity

            <form method="get" action="/" novalidate>
              <input
                type="text"
                id="fname"
                placeholder="First Name"
                autocomplete="given-name"
              />
              <div class="error-text">First Name cannot be empty</div>
  
  .section2 .card .error-text {
  	color: hsl(0, 100%, 74%);
  	text-align: right;
  	font-style: italic;
  	font-size: 0.7rem;
  	margin-top: -0.5rem;
  	visibility: hidden;
  }
  
  #myCard .is-invalid-text {
  	visibility: visible;
  }```
  
  javascript add the class .is-invalid-text to the div to show it.
  

  1