EasyUI DateBox - 无法提交表单答案

【问题标题】：EasyUI DateBox - cannot submit a formEasyUI DateBox - 无法提交表单
【发布时间】：2017-01-24 13:37:06
【问题描述】：

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

<!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页面，应该接收请求参数。

【问题讨论】：

您点击提交时是否输入了发货日期？
是的。我已经测试了所有可能的东西。
您是否尝试过在没有 name 属性的情况下定义 easyui 日期框？官方文档上的示例没有。如果这是问题，我会感到惊讶。

标签： javascript jquery forms jsp jquery-easyui

【解决方案1】：

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

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

HTML：

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

并初始化EasyUI datebox，将所需属性直接添加到新创建的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 验证。

来源：

【讨论】：

你会推荐什么来代替 EasyUI？
我讨厌说“这取决于”，因为这对您没有用处，但在不了解您的要求/架构/约束的情况下，这是一个很难回答的问题。例如：我假设您正在开发旧版应用程序，因为您使用的是旧版本的 jQuery (1.6)，所以我会犹豫向您推荐纯 HTML5 控件（）。但是，从您的原始示例来看，该假设可能不正确。
好吧，如果我们假设一个带有纯 HTML5 控件的现代 GUI。比 EasyUI 更可靠的东西。也许是 KendoUI、JQWidgets 或 Wijmo？