Question

我有一个奇怪的问题，我的两个数字字段上的模式无法正常工作（即使字段未经过验证，也可以提交表单）。 HTML如下所示：

        <input type="text" class="txtmin" pattern="^[+-]?\d*(\.\d+)?$" placeholder="Minimum price">

        <input type="text" class="txtmax" pattern="^[+-]?\d*(\.\d+)?$" placeholder="Maximum price">

当我在字段中输入内容时，如果它与正则表达式不匹配，则字段标记为红色，但如果我尝试在onclick事件上提交表单，则验证不会阻止用户更改输入价值，我得到一个例外...

$(".btnAnalyze").click(function () {
            // the form doesn't validates??
        });

我正在尝试这样的事情：

  $('txtmin').oninvalid = function (event) {
            return;
        }

但是这没有做任何事情？有人可以帮助我吗？

编辑：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());
            }
        });

Answer 1

点击按钮并不等同于提交表单。行动的顺序是：

点击按钮
按钮上的click消息
如果click事件未取消该事件，则在表单上触发submit
如果submit事件未取消事件（例如验证错误！），则继续提交表单

由于您已在click活动中开展工作，因此该表单尚未经过验证！您应该使用submit事件形式开展工作。

Answer 2

如果您只期望input字段中的价格，那么更好（即大多数浏览器支持）的方法是使用number min类型max和{ {1}}属性：

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

请注意，这两个字段都设置了min和max属性，但这不是强制性的 - 您可以使用纯HTML限制或不限制每个输入的值。

另一种方法是使用jQuery之类的Javascript库并执行输入的手动验证。

模式HTML5验证不会在未经验证时阻止表单提交

2 个答案: