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日期框并将所需属性直接添加到新创建的EasyUI日期框中（使用稍微合理的日期格式模式）。

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 DateBox - 无法提交表单

1 个答案: