时间戳

首页 > 解决方案 > 如何在不使用的情况下触发 html5 验证

元素？

javascript - 如何在不使用的情况下触发 html5 验证
元素？

问题描述

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

<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
        });

标签： javascriptjqueryhtml

解决方案

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

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

推荐阅读