![](/img/trans.png)
[英]Trigger standard HTML5 validation (form) without using submit button?
[英]How to trigger the html5 validation without using <form> element?
我有看起来像这样的正常形式(您可以忽略内部字段,因为它们都是输入字段):
<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>
执行提交操作时<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
});
您可以为此使用约束验证 API。 参考这个。 例子-
var emailId = document.getElementById("id");
var valid = emailId . checkValidity();
if (valid) {
//perform operation
}
表单验证将由表单内的按钮自动触发。 但是对于手动触发,您可以使用checkValidity
。 这是该案例的示例 bin:
https://jsbin.com/misotahupu/edit?html,js,console,output
如果没有<form>
元素,您可能不应该进行 HTML5 验证。 这里有更多关于表格的文献
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.