博主最近被分配到写前端的任务，没写过…边学边写吧。今天遇到一个小问题，记录一下。
问题描述：
因为一些不可描述的原因，需要用 a 标签而不是button来进行表单的提交，我一开始是给 a 标签绑定点击事件，调用函数找到对应的form并调用submit函数进行提交。这样做的结果是，提交前没有进行验证。

解决方案：
在页面新增一个隐藏的type=“submit”的button，点击 a 标签则调用函数找到这个button并调用它的click函数。

html文件截取

   {% ifequal identity 'admin' %}
        <form role="form" action="{% url 'display:getResult_search_admin' %}" class="search_form">
    {% else %}
        <form role="form" action="{% url 'display:getResult_search_tourist' %}" class="search_form">
    {% endifequal %}
        <div class="form-group row" id="search-group">
            <div class="col-sm-5 col-sm-offset-3" id="div_input" >
                <input type="text" name="search_text" class="form-control" id="searchtext" required oninvalid="setCustomValidity('请输入搜索内容')" oninput="setCustomValidity('')">
                <input type="text" name="search_category" id="search_category" hidden>
            </div>
            <div class="col-sm-2" id="div_btn" >
                <!--<button type="submit" class="btn btn-sm btn-primary btn-block" >搜索</button>-->
                <div class="dropdown">
                  <button class="btn btn-primary dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    搜索
                    <span class="caret"></span>
                  </button>
                  <button type="submit" id="btn_submit" hidden></button>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a onclick="tosubmit('type')">类型</a></li>
                    <li><a onclick="tosubmit('brand')">品牌</a></li>
                    <li><a onclick="tosubmit('model')">型号</a></li>
                    <li><a onclick="tosubmit('fingerprint')">指纹</a></li>
                  </ul>
                </div>
            </div>
        </div>
    {% ifequal identity 'admin' %}
        </form>
    {% else %}
        </form>
    {% endifequal %}

可以看到以上代码中的第一个 input ，已经设置了require（该输入框不能为空），以及检测函数：

<input type="text" name="search_text" class="form-control" id="searchtext" required oninvalid="setCustomValidity('请输入搜索内容')" oninput="setCustomValidity('')">

错误示范

    <script>
        function tosubmit(category) {
            var search_category = $("input#search_category");
            search_category.val(category);
            $("form.search_form").submit();
        }
    </script>

这样写就不进行检验，而直接提交。

正确方案

    <script>
        function tosubmit(category) {
            var search_category = $("input#search_category");
            search_category.val(category);
            $("button#btn_submit").click();
        }
    </script>

总结：

点击 type=“submit” 的按钮会先进行输入检验，再进行提交。
调用 form 的submit函数会直接进行提交。