javascript - 必填字段在div内不起作用

我正在尝试将默认的必填字段实现为HTML5格式，但是如果我在div中将其设置为无效，则无法使用。

不起作用的代码：

<form>
    <div class="form-phone">
      <label for="phone" id="lphone">Phone no:</label><br>
      <input type="number" id="phone" name="phone" placeholder="Phone-Number" required/><br>
    </div>
    <div id="confirmDetails">
        <input id="submitbtn" type="submit" value="Call Me!" />
     </div>
 </form>

工作代码：

$('#confirmDetails').on('click', 'input', function(e) {
  alert(test);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="form-phone">
    <label for="phone" id="lphone">Phone no:</label><br>

    <input type="number" id="phone" name="phone" placeholder="Phone-Number" required/><br>
  </div>
  <input id="submitbtn" type="submit" value="Call Me!" />
</form>

最佳答案

在表单中添加一个ID：

<form id="myForm">
<div class="form-phone">
      <label for="phone" id="lphone">Phone no:</label><br>

      <input type="number" id="phone" name="phone" placeholder="Phone-Number" required/><br>
 </div>
<div id="confirmDetails">
     <input id="submitbtn" type="submit" value="Call Me!" />
     </div>
 </form>

并监听表单的事件“ submit”：

$('#myForm').on('submit',function (e) {
  alert(test);
})

这样，您离开导航器进行验证。并且不要忘记在服务器端添加验证

希望这可以帮助