[英]How to trigger the html5 validation without using <form> element?
I have normal form which looks like this(You can ignore the inside fields as they are all input fields):我有看起来像这样的正常形式(您可以忽略内部字段,因为它们都是输入字段):
<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>
Due to some reasons,I have not wrapped all these fields inside <form></form>
tag but when I perform the submit operation by clicking the <button type="submit" id="sub" class="btn btn-success pull-right">Submit</button>
,it is not performing html5 validation.由于某些原因,我没有将所有这些字段都包含在
<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 验证。 This on click function is trigerred and it is getting posted.How to validate html5 features without using <form>
tag?这个点击功能被触发并且被发布。如何在不使用
<form>
标签的情况下验证 html5 功能?
$( "#sub" ).click(function() {
alert( "Handler for .click() called." );
//ajax code to submit
});
Form validations will be triggered by buttons inside a form automatically.表单验证将由表单内的按钮自动触发。 But for manual triggering you can use
checkValidity
.但是对于手动触发,您可以使用
checkValidity
。 Here's a sample bin for that case:这是该案例的示例 bin:
https://jsbin.com/misotahupu/edit?html,js,console,output https://jsbin.com/misotahupu/edit?html,js,console,output
You probably shouldn't be doing HTML5 validation without the <form>
element.如果没有
<form>
元素,您可能不应该进行 HTML5 验证。 Here's more literature on forms这里有更多关于表格的文献
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.