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}'
        });
      });

工作代碼筆

就我個人而言，我不是這個解決方案（或 EasyUI 控件）的忠實粉絲，因為它是我認為 EasyUI 控件缺陷的一種解決方法，但這應該適用於 HTML5 驗證.

旁白：EasyUI 日期框確實有它自己的required選項，可以在初始化期間傳遞，但在撰寫本文時，它用於使用 EasyUI 的自定義驗證器而不是 HTML5 驗證。

資料來源：

EasyUI DateBox - 無法提交表單

問題描述

1 個解決方案

解決方案1
2 已采納 2016-09-19 02:41:28

EasyUI DateBox - 無法提交表單

問題描述

1 個解決方案

解決方案1 2 已采納 2016-09-19 02:41:28

解決方案1
2 已采納 2016-09-19 02:41:28