когда я помещаю проверку в форму, поля ввода становятся действительными, когда я использую дизайн материала

Question

Я делаю форму для своего проекта и застрял здесь,

, в которой метка всплыла, когда поля ввода сфокусированы и действительны.

$('#submit_btn').on('click', function(e) {
  e.preventDefault()
  var phone_no = $('#phone_no').val()



  checkPhoneNo(phone_no)


  function checkPhoneNo(phone_no) {
    if (phone_no == '' || phone_no == null || phone_no.match(/[a-zA-Z]/)) {
      $('#phone_no')
        .next()
        .next()
        .text('Phone No cannot be null or aplhabets')
    } else if (/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/) {
      $('#phone_no')
        .next()
        .next()
        .text('')
    }
  }
})

.textBoxContainer {
  height: 50px;
  position: relative;
  margin: 20px;
}

.textbox {
  border-bottom: solid 2px #984343;
  border-top: none;
  border-left: none;
  font-family: Candara;
  width: 30%;
}

.textbox+.lbl {
  position: absolute;
  top: 0px;
  left: 0px;
  transition: all .2s ease-out;
}

.textbox:focus {
  border-bottom: solid 2px #4CAF50;
  outline: none;
}

.textbox:focus~label,
.textbox:valid~label {
  top: -15px;
  font-size: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='textBoxContainer'>
  <input class='textbox' id="phone_no" type="text" />
  <label class='lbl'>
phone no....
</label>
</div>

Здравствуйте, я делаю форму для своего проекта и застрял здесь,

, в которой ярлык поплылкогда поля ввода сфокусированы и действительны, пожалуйста, помогите мне.