Jquery search box input word limit, pop-up prompt, and how to judge the corresponding search box with multiple search boxes on a page

Recently, I encountered a related problem in making a webpage search box. The general requirement is to search the input box. If you do not fill in the text and click submit, it will prompt "Please enter content". If the number of words entered is less than xx, it will prompt "The number of words cannot be less than xx". If the number of words entered is greater than xxx, it will prompt "the number of words cannot exceed xxx" . On the other page, there are two search boxes and the information of the form is the same. When the information of the second search box is the same, the prompt is correct. The following is the specific code.

 The pop-up window effect of layer.msg is used, and relevant js needs to be introduced.

html part:

头部需要引入的js
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>

第一个输入框，位于header里
        <div class="search">
            <form action="index.php" method="get" name="searchform" id="searchform">
                <input name="keyword" id="keyword" class="input_text" value="" placeholder="输入关键字进行搜索" type="text">
                <input class="input_submit" value="" type="submit">
            </form>
        </div>


第二个输入框，在main里
                <div class="search search-list">
                    <form action="index.php" method="get" name="searchform" id="searchform">
                        <input name="keyword" id="keyword" class="input_text" value="" placeholder="输入关键字进行搜索" type="text">
                        <input class="input_submit" value="" type="submit">
                    </form>
                </div>

js code part:

    // 判断搜索框中输入的字数
    $(".input_submit").on("click", function(e) {
        e.preventDefault(); // 阻止默认的表单提交行为

        // 获取当前form元素
        var form = $(this).closest("form");
        // 获取当前form元素中name为keyword的input元素的值并计算长度
        var val = form.find("input[name='keyword']").val();
        if (val.trim() === "") {
            // 如果输入框的值为空，则弹出提示框
            layer.msg("请输入内容", {time: 1500});
            return;
        }

        var len = 0;
        for (var i = 0; i < val.length; i++) {
            var charCode = val.charCodeAt(i);
            if (charCode >= 0 && charCode <= 128) {
                len += 1;
            } else {
                len += 2;
            }
        }
        // 判断长度是否符合要求
        if (len < 2) {
            // 弹出提示框
            layer.msg("字数不能少于" + 2 + "个", {time: 1500}); // 1.5秒后自动关闭提示框
        } else if (len >= 12) {
            // 弹出提示框
            layer.msg("字数不能超过" + 12 + "个", {time: 1500}); // 1.5秒后自动关闭提示框
        } else {
            // 如果长度符合要求，则提交表单
            $("form").submit();
        }
    });

In addition, if you judge that the input content is empty, you can also use the setCustomValidity that comes with the html5 form to realize the prompt information. The style is relatively fixed, and you can refer to Baidu for details.