EasyUI DateBox - не может отправить форму

Как отправить HTML-форму, содержащую DateLox EasyUi? Форма не может быть отправлена. При нажатии кнопки «Отправить» ничего не происходит. Когда я комментирую тег DateBox, форма отправляется ОК.EasyUI 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, которая должна получать параметры запроса.

источник

2016-09-16 Jan Bodnar

Вы ввели дату доставки, когда вы нажмете кнопку отправить? –

Да. Я проверил все возможные вещи. –

Вы пробовали определить дату easyday без атрибута name? Пример в официальной документации отсутствует. Я был бы удивлен, если это проблема. –

Похоже, вы получаете эту проблему, потому что элемент управления датой ввода EasyUI скрывает ваше текстовое поле и вставляет его собственное текстовое поле в DOM. EasyUI не соблюдает атрибут HTML5 required только что добавленного текстового поля. Чтобы добавить оскорбление к травме, поскольку ваш исходный текстовый текст [теперь скрыт] по-прежнему имеет атрибут required, когда Chrome пытается его проверить, проверка не выполняется, и Chrome пытается вернуть фокус обратно в исходное текстовое поле. Поскольку ваш пользователь теперь скрыт и не может получить фокус, Chrome не знает, что делать и останавливает процесс в этот момент.

Чтобы обойти это, мое решение (если вы хотите продолжать использовать форму проверки HTML) является использование API EasyUI для инициализации элемента управления datebox EasyUI, сделав разметку, как голые кости, как это возможно:

HTML :

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

и инициализировать datebox EasyUI и добавьте нужный атрибут непосредственно к вновь созданному 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, с момента написания этой публикации.

Источники:

источник

2016-09-19 02:41:28

Что вы порекомендуете вместо EasyUI? –

Ненавижу говорить «это зависит», потому что это не полезно для вас, но это сложный вопрос для ответа, не зная ваших требований/архитектуры/ограничений.Например: я предполагаю, что вы работаете с устаревшим приложением, потому что используете более старую версию jQuery (1.6), поэтому я смущаюсь предлагать вам простые элементы управления HTML5 (требуется ). Однако из вашего первоначального примера это предположение может быть неверным. –

Хорошо, если мы предположили современный графический интерфейс с чистым контролем HTML5. Что-то более прочное, что EasyUI. Может быть, KendoUI, JQWidgets или Wijmo? –

EasyUI DateBox - не может отправить форму

ответ

Смежные вопросы