What should I do if I don't want to set the required attribute for some of my HTML input tags inside a form?

html css forms css-selectors required

I have a form which you need to specify the required attribute for some inputs in order to work properly.

Here is my code:

:root
{
  background-color: black;
}

form{
  background-color: purple;
}

.Comment-rows {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(161px, 1fr));
  transform: translateY(20px);
  transition: opacity 400ms ease-in, transform 300ms ease-in;
}

.Comment-rows .Comment-form {
  position: relative;
  width: 100%;
  padding: 0 10px;
  margin: 60px 0 10px;
  transition: 0.5s;
}

.Comment-rows .Comment-form .Comment-InputBox {
  position: relative;
  width: 100%;
  height: 40px;
  color: yellow;
}

.Comment-rows .Comment-form .Comment-InputBox input,
.Comment-rows .Comment-form .Comment-InputBox.textarea textarea {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  box-shadow: none;
  border: none;
  outline: none;
  font-size: 1.8rem;
  padding: 0 10px;
  z-index: 1;
  color: purple;
}

.Comment-rows .Comment-form .Comment-InputBox .Comment-text {
  position: absolute;
  top: 0;
  right: 0;
  line-height: 40px;
  font-size: 1.5rem;
  padding: 0 10px;
  display: block;
  transition: 0.5s;
  pointer-events: none;
}

.Comment-rows .Comment-form .Comment-InputBox input:focus+.Comment-text,
.Comment-rows .Comment-form .Comment-InputBox input:valid+.Comment-text {
  top: -35px;
  right: -10px;
}

.Comment-rows .Comment-form .Comment-InputBox .Comment-Line {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: yellow;
  transition: 0.5s;
  border-radius: 2px;
  pointer-events: none;
}

.Comment-rows .Comment-form .Comment-InputBox input:focus~.Comment-Line,
.Comment-rows .Comment-form .Comment-InputBox input:valid~.Comment-Line {
  height: 100%;
}

/*textarea*/

.Comment-rows .Comment-form .Comment-InputBox.textarea {
  width: 100%;
  height: 100px;
  position: relative;
  padding: 10px 0;
}

.Comment-rows .Comment-form .Comment-InputBox.textarea textarea {
  height: 100%;
  resize: none;
  top: 0;
  right: 0;
}

.Comment-rows .Comment-form .Comment-InputBox textarea:focus+.Comment-text,
.Comment-rows .Comment-form .Comment-InputBox textarea:valid+.Comment-text {
  top: -35px;
  right: -10px;
}

.Comment-rows .Comment-form .Comment-InputBox textarea:focus~.Comment-Line,
.Comment-rows .Comment-form .Comment-InputBox textarea:valid~.Comment-Line {
  height: 100%;
}

/* Send button */

.Comment-form-Button{
  margin: 20px;
  display: block;
  padding: 5px;
}

.Comment-form-Button button{
  padding: 7px 16px;
}
<form>
  <div class="Comment-rows">
    <div class="Comment-form">
      <div class="Comment-InputBox">
        <input type="text" name="name" autocomplete="nope">
        <span class="Comment-text">name</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
    <div class="Comment-form">
      <div class="Comment-InputBox">
        <input type="text" name="lastName">
        <span class="Comment-text">last name</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
  </div>

  <div class="Comment-rows">
    <div class="Comment-form">
      <div class="Comment-InputBox">
        <input type="email" name="email" required="required" autocomplete="on" oninvalid="this.setCustomValidity('please enter your email')" oninput="this.setCustomValidity('')">
        <span class="Comment-text">email*</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
    <div class="Comment-form">
      <div class="Comment-InputBox">
        <input type="text" name="phoneNumber">
        <span class="Comment-text">phone number</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
  </div>

  <div class="Comment-rows">
    <div class="Comment-form">
      <div class="Comment-InputBox textarea">
        <textarea required="required" name="message" oninvalid="this.setCustomValidity('please enter your message')" oninput="this.setCustomValidity('')"></textarea>
        <span class="Comment-text">enter your message*</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
  </div>

  <div class="Comment-form-Button">
    <button type="submit">
                        <span>Send</span>
                    </button>
  </div>
</form>

If you pay attention to Snippet result, you'll realize the input fields get some styles when they get focused or when they are valid.

Only two of the input fields have required attribute ( email, message). the style has to only apply to focused and valid inputs ( those which have required attribute).

The user doesn't have to enter name, last name and phone number. They're optional. But here, after refreshing the page "name, last name, phone number" input fields will get the focused styles before actually getting focused! They must behave like "email and message" after refreshing the page. It means They shouldn't be focused from the beginning and if you pay attention, they're the only input fields which don't have required attribute.

The problem is the valid property in my CSS. If I remove it, then the codes won't work properly and if I keep it, then it won't consider "name, last name, phone number" input fields as required ones. So it assumes they are always valid. So they always get the style of a valid field which isn't what I want.

What should I do to my codes without having any detrimental impact on my main style?

Any assistance you can provide would be greatly appreciated.


You can make it only apply :valid selector to elements with required attribute: input[required]:valid

For other fields a trick can be used to apply style if its not empty by adding an empty placeholder=" " attribute and the check if it's displayed or not via :placeholder-shown selector:

:root
{
  --our-purple-color: purple;
  background-color: black;
}
.Comment-rows {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(161px, 1fr));
/*  opacity: 0;*/
  transform: translateY(20px);
  transition: opacity 400ms ease-in, transform 300ms ease-in;
}

.Comment-rows .Comment-form {
  position: relative;
  width: 100%;
  padding: 0 10px;
  margin: 60px 0 10px;
  transition: .5s;
}

.Comment-rows .Comment-form .Comment-InputBox {
  position: relative;
  width: 100%;
  height: 40px;
  color: yellow;
}

.Comment-rows .Comment-form .Comment-InputBox input,
.Comment-rows .Comment-form .Comment-InputBox.textarea textarea {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  box-shadow: none;
  border: none;
  outline: none;
  font-size: 1.8rem;
  padding: 0 10px;
  z-index: 1;
  color: var(--our-purple-color);
}

.Comment-rows .Comment-form .Comment-InputBox .Comment-text {
  position: absolute;
  top: 0;
  right: 0;
  line-height: 40px;
  font-size: 1.5rem;
  padding: 0 10px;
  display: block;
  transition: .5s;
  pointer-events: none;
}

/* added */
.Comment-rows .Comment-form .Comment-InputBox input:not([required]):not(:placeholder-shown)+.Comment-text,

.Comment-rows .Comment-form .Comment-InputBox input:focus+.Comment-text,
/* changed */
.Comment-rows .Comment-form .Comment-InputBox input[required]:valid+.Comment-text {
  top: -35px;
  right: -10px;
}

.Comment-rows .Comment-form .Comment-InputBox .Comment-Line {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: yellow;
  transition: .5s;
  border-radius: 2px;
  pointer-events: none;
}

/* added */
.Comment-rows .Comment-form .Comment-InputBox input:not([required]):not(:placeholder-shown)~.Comment-Line,

.Comment-rows .Comment-form .Comment-InputBox input:focus~.Comment-Line,
/* changed */
.Comment-rows .Comment-form .Comment-InputBox input[required]:valid~.Comment-Line {
  height: 100%;
}


/*textarea*/

.Comment-rows .Comment-form .Comment-InputBox.textarea {
  width: 100%;
  height: 100px;
  position: relative;
  padding: 10px 0;
}

.Comment-rows .Comment-form .Comment-InputBox.textarea textarea {
  height: 100%;
  resize: none;
  top: 0;
  left: 0;
}

/* added */
.Comment-rows .Comment-form .Comment-InputBox textarea:not([required]):not(:placeholder-shown)+.Comment-text,

.Comment-rows .Comment-form .Comment-InputBox textarea:focus+.Comment-text,
/* changed */
.Comment-rows .Comment-form .Comment-InputBox textarea[required]:valid+.Comment-text {
  top: -35px;
  left: -10px;
}

/* added */
.Comment-rows .Comment-form .Comment-InputBox textarea:not([required]):not(:placeholder-shown)~.Comment-line,

.Comment-rows .Comment-form .Comment-InputBox textarea:focus~.Comment-Line,
/* changed */
.Comment-rows .Comment-form .Comment-InputBox textarea[required]:valid~.Comment-Line {
  height: 100%;
}
<form autocomplete="off">
  <div class="Comment-rows">
    <div class="Comment-form">
      <div class="Comment-InputBox">
        <input type="text" name="name" autocomplete="nope" placeholder=" ">
        <span class="Comment-text">name</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
    <div class="Comment-form">
      <div class="Comment-InputBox">
        <input type="text" name="lastName" placeholder=" ">
        <span class="Comment-text">last name</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
  </div>

  <div class="Comment-rows">
    <div class="Comment-form">
      <div class="Comment-InputBox">
        <input type="email" name="email" required="required" autocomplete="on" oninvalid="this.setCustomValidity('')" oninput="this.setCustomValidity('')">
        <span class="Comment-text">email*</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
    <div class="Comment-form">
      <div class="Comment-InputBox">
        <input type="text" name="phoneNumber" placeholder=" ">
        <span class="Comment-text">phone number</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
  </div>

  <div class="Comment-rows">
    <div class="Comment-form">
      <div class="Comment-InputBox textarea">
        <textarea required="required" name="message" oninvalid="this.setCustomValidity('')" oninput="this.setCustomValidity('')"></textarea>
        <span class="Comment-text">enter your message*</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
  </div>

  <div class="Comment-form-Button">
    <button type="submit" disabled>
                        <span>send</span>
                        <div class="liquid"></div>
                    </button>
  </div>
</form>

Related

x.abs() vs negation (-x) performance in Rust, when x is a known negative number
I get forbidden when i'm trying to post from postman in spring boot app with keycloak and mysql docker containers
RuboCop - [AllCops -> Exclude] not working in GitHub Actions
Handle cancel button while using Camera
How to reduce Android APK size in react-native?
why won't children of the body element take percentage heights? [duplicate]
How to link jemalloc shared library using cmake
Debian Installation from Rescue System with PreSeed (fully automated)?
How to install php5-gd on ubuntu?
Stop Munin messages from /var/log/syslog
Ping IPv4 addresses from an IPv6 host
How to calculate required switch speed based on network usage?