Javascript 如何在不使用<；的情况下触发html5验证；表格>；元素？

我有这样的标准形式（您可以忽略内部字段，因为它们都是输入字段）：

---

您可以为此使用约束验证API。参考 范例-

---

表单验证将由表单内部的按钮自动触发。 但对于手动触发，您可以使用

检查有效性

。 以下是该案例的示例箱：

---

如果没有

元素，您可能不应该进行HTML5验证

输入/按钮类型的可能重复项

submit

仅适用于

表单

。表示它提交父窗体。如果您没有任何表单，

submit

将不起作用。正如您在html中出于某种原因所说的，您不想在

表单

中包装它，然后使用javascript包装它。但要触发表单提交，您必须拥有

表单

，是的，如果您想检查每个字段的

验证

，那么当然您可以通过@CueHow弹出错误消息窗口来引用上述链接，就像提交表单一样（如果无效）？我还想知道如何触发验证弹出消息。

<div class="col-md-12" style="float: none;">
   <div class="form-group row">
      <div class="col-md-6" style="border: 2px solid #efefef;">
         <div class="card-body">
            <div class="col-md-12">
               <h4>Type</h4>
            </div>
         </div>
      </div>
      <div class="col-md-6" style="border: 2px solid #efefef;">
         <div class="card-body">
            <div class="form-group row ">
               <div class="col-md-4">
                  <label>Appeal Reason</label>
               </div>
               <div class="col-md-3">
                  <label>Appeal Amount</label>
               </div>
               <div class="col-md-3">Penalty</div>
               <div class="col-md-2"></div>
               <div class="col-md-4">
                  <input type="text"
                     class="form-control"
                     id="applReason" 
                     name="applReason" required> <span
                     id="fromDateError" style="color: red; font-weight: bold"></span>
               </div>
               <div class="col-md-3">
                  <input type="number"
                     class="form-control"
                     id="applAmount" name="applAmount"
                     required>
                  <span id="toDateError" style="color: red; font-weight: bold"></span>
               </div>
               <div class="col-md-3">
                  <input type="number" class="form-control" id="applPenalty"
                     name="applPenalty" required> <span
                     id="consignmentNoError"
                     style="color: red; font-weight: bold"></span>
               </div>
               <div class="col-md-2">
                  <button type="submit">+</button>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="col-md-12">
      <h5>Remarks</h5>
      <textarea rows="4" cols="100">

     </textarea>
   </div>
   <button type="submit"  id="sub" class="btn btn-success pull-right">Submit</button>
</div> 

$( "#sub" ).click(function() {
          alert( "Handler for .click() called." );
       //ajax code to submit
        });

var emailId = document.getElementById("id");
var valid = emailId . checkValidity();
if (valid) {
//perform operation
}