javascript - 未验证时模式 HTML5 验证不会阻止表单提交

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

单击按钮并不等于提交表单。操作顺序是:

1. 点击按钮
2. 触发按钮上的click事件
3. 如果click事件没有取消该事件，则在表单上触发submit
4. 如果submit事件没有取消该事件(例如验证错误!)，则继续提交表单

由于您是在 click 事件中进行工作，因此表单尚未经过验证!您应该在表单的 submit 事件中完成这项工作。