EasyUI DateBox - 无法提交表单

Question

如何发送包含 EasyUi DateBox 的 HTML 表单？无法提交表格。单击提交按钮时没有任何反应。当我注释掉 DateBox 标签时，表单提交成功。

<!DOCTYPE html> 
    <html>
    <head>
        <meta charset="UTF-8">
        <title>DateBox example</title>
        <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
        <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>
    <body>
        <h2>DateBox example</h2>

        <form action="showDate.jsp">

            <div>
                <label for="item">Item name:</label>
                <input type="text" id="item" name="itemName" required="required">
            </div>
            <br>
            <div>
                <label for="sdate">Shipment date:</label>
                <input type="text" class="easyui-datebox" id="sdate" 
                       name="shipmentDate" required="required">
            </div>
            <input type="submit">

        </form>

    </body> 
    </html>

这是 HTML 表格。

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>The date</title>
    </head>
    <body>
        <p>Item name:  <%= request.getParameter("itemName")%> </p>
        <p>Shipment date:  <%= request.getParameter("shipmentDate")%> </p>
    </body>
</html>

这是JSP页面，应该接收请求参数。

Answer 1

您遇到这个问题似乎是因为 EasyUI 日期框控件隐藏了您的文本框并在 DOM 中插入了它自己的文本框。 EasyUI 不支持新添加的文本框上的 HTML5 required 属性。雪上加霜的是，由于您的原始文本框 [现在隐藏] 仍然具有 required 属性，当 Chrome 尝试验证它时，验证失败并且 Chrome 尝试将焦点放回您的原始文本框。由于您的现在已隐藏并且无法获得焦点，Chrome 不知道该怎么做并在此时停止进程。

为了解决这个问题，我的解决方案（如果您想继续使用 HTML 表单验证）是使用 EasyUI 的 api 通过将标记设为裸来初始化 EasyUI 日期框控件 -骨头尽可能：

HTML:

<input type="text" id="sdate">

并初始化EasyUI datebox，将required属性直接添加到新建的EasyUI datebox（日期格式模式稍微合理）。

JavaScript:

      $(document).ready(function () {
        $('#sdate').datebox(); // Initialize the easyui datebox

        // Make the easyui datebox honor HTML5 validation
        $('#sdate').datebox('textbox').attr({
          'required': 'true',
          'pattern': '(?:(?:0[1-9]|1[0-2])[\/\-. ]?(?:0[1-9]|[12][0-9])|(?:(?:0[13-9]|1[0-2])[\/\-. ]?30)|(?:(?:0[13578]|1[02])[\/\-. ]?31))[\/\-. ]?(?:19|20)[0-9]{2}'
        });
      });

Working Codepen

就个人而言，我不是这个解决方案（或 EasyUI 控件的忠实粉丝），因为它是我认为 EasyUI 控件中的缺陷的解决方法，但这应该适用于HTML5 验证的一小部分。

旁白：EasyUI 日期框确实有它自己的 required 选项，可以在初始化期间传递，但它用于与 EasyUI 的自定义验证器一起使用，而不是 HTML5 验证，截至本文撰写时post.

来源：

EasyUI Datebox Documentation
EasyUI Combo Documentation (Parent control of Datebox)
Whosebug: Various contributors (especially Ankit Sharma's answer)

EasyUI DateBox - 无法提交表单

EasyUI DateBox - cannot submit a form

javascript

forms

jquery

jsp

jquery-easyui