当我在表单上进行验证时，输入字段在我使用材质设计的地方有效

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>

你好， 我正在为我的项目制作表格，并且被困在这里，

其中输入字段为焦点且有效时标签浮动 请帮我。