[英]Pattern HTML5 validation not preventing form submit when not validated
I have an odd problem where my pattern on two numerical fields is not working properly (the form can be submitted even if the fields are not validated). 我有一个奇怪的问题,我在两个数字字段上的模式无法正常工作(即使字段未经验证也可以提交表单)。 The HTML looks like following:
HTML如下所示:
<input type="text" class="txtmin" pattern="^[+-]?\d*(\.\d+)?$" placeholder="Minimum price">
<input type="text" class="txtmax" pattern="^[+-]?\d*(\.\d+)?$" placeholder="Maximum price">
When I enter something into the field, if it doesn't matches the regex, the field gets marked red, but if I try to submit the form on onclick event, the validation doesn't prevents the user to change the input value and I get an exception ... 当我在字段中输入内容时,如果它与正则表达式不匹配,则该字段会被标记为红色,但是如果我尝试在onclick事件上提交表单,则验证不会阻止用户更改输入值,因此得到一个例外...
$(".btnAnalyze").click(function () {
// the form doesn't validates??
});
I was trying something like this: 我正在尝试这样的事情:
$('txtmin').oninvalid = function (event) {
return;
}
But this doesn't do anything? 但这什么都不做? Can someone help me out?
有人可以帮我吗?
Edit: Riyad this is the full code HTML and the event I'm firing: 编辑:Riyad这是完整的代码HTML和我正在触发的事件:
<form>
<span class="input-group-btn">
<button class="btn btn-default btnGo" type="submit">Go!</button>
</span>
</form>
$(".btnGo").click(function () {
if ($('.txtSearch').val() == "") {
ShowMessage("Please enter the search term!");
return;
}
else{
PostAndUpdate($('.txtSearch').val(), $('input[name=type]:checked').val(), $('input[name=shipping]:checked').val(), $('input[name=condition]:checked').val(), $('.txtmin').val(), $('.txtmax').val());
}
});
Clicking the button doesn't equate to submitting the form. 单击按钮并不等同于提交表单。 The order of actions is:
操作顺序为:
click
event on the button click
上的click
事件 click
event does not cancel the event, then fire submit
on the form click
事件没有取消事件,则在表单上进行submit
submit
event does not cancel the event (eg. validation errors!) then proceed to submit the form submit
事件没有取消事件(例如,验证错误!),则继续提交表单 Since you're doing your work in the click
event, the form hasn't been validated yet! 由于您是在
click
事件中进行工作的,因此该表单尚未通过验证! You should instead do the work in the form's submit
event. 您应该改为在表单的
submit
事件中进行工作。
If you expect only prices in your input
fields, then better (ie most supported by browsers) approach is to use input
of type number
with min
and max
attributes: 如果您只希望在
input
字段中input
价格,那么更好的方法(即浏览器最支持的方法)是使用带有min
和max
属性的number
类型的input
:
<input type="number" class="txtmin" min="0.01" max="1000.00" placeholder="Minimum price">
<input type="number" class="txtmax" min="0.01" max="1000.00" placeholder="Maximum price">
Note that both fields have min
and max
attributes set, however this is not mandatory - you can restrict or not the values of every input with pure HTML this way. 请注意,两个字段都设置了
min
和max
属性,但这不是必需的-您可以通过这种方式限制是否使用纯HTML的每个输入的值。
Another approach is to use Javascript library like jQuery
and perform manual validation of input. 另一种方法是使用Javascript库(如
jQuery
并执行输入的手动验证。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.