如何发送包含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页面，应该接收请求参数。
最佳答案
您似乎遇到了此问题，因为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 Documentation
EasyUI Combo Documentation (Parent control of Datebox)
Stackoverflow: Various contributors (especially Ankit Sharma's answer)
关于javascript - EasyUI DateBox-无法提交表格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39529533/