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

Question

我正在尝试将默认必填字段实现为 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>

Answer 1

向表单添加 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);
})

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

希望这有帮助