javascript - 提交后会出现提醒信息

Question

如果用户没有输入任何数据，我的警报消息会在加载/提交记录之前弹出。它仍然弹出。我应该为我的警报框使用哪些附加 JavaScript 函数？

这是我的代码

function myFunction() {
    alert("Adding Succesful!");
}

<label for="bName" class="control-label col-xs-4"><p class="left">Brand Name</p></label>
 <input name="bName" class="form-control req" required/> 

<button type="submit" class="btn btn-default bt"  onclick="myFunction()" style="align:right;">ADD</button>

Answer 1

使用 HTML5 有效性检查来查看表单是否有效。

var form = document.getElementById('f');

function myFunction() {
  if (form.checkValidity()) {
    alert("Adding Succesful!");
  }
}

<form id="f">
  <label for="bName" class="control-label col-xs-4">
    <p class="left">Brand Name</p>
  </label>
  <input name="bName" class="form-control req" required/>

  <button type="submit" class="btn btn-default bt" onclick="myFunction()" style="align:right;">ADD</button>
</form>