Question

我有一个看起来像这样的普通形式（您可以忽略内部字段，因为它们都是输入字段）：

<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>

由于某些原因，我没有将所有这些字段都包装在<form></form>标记中，但是当我通过单击 <button type="submit" id="sub" class="btn btn-success pull-right">Submit</button>，它没有执行html5验证。点击功能已被触发并发布。如何在不使用<form>标签的情况下验证html5功能？

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

Answer 1

您可以为此使用约束验证API。请参阅this。例子-

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

Answer 2

将通过内部按钮自动触发表单验证。但是对于手动触发，您可以使用checkValidity。这是针对这种情况的示例垃圾箱：

https://jsbin.com/misotahupu/edit?html,js,console,output

如果没有<form>元素，您可能不应该进行HTML5验证。 Here's more literature on forms

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

2 个答案: