EasyUI DateBox - フォームを送信できません

EasyUi DateBoxを含むHTMLフォームを送信するにはどうすればいいですか？フォームを送信できません。 [送信]ボタンをクリックしても何も起こりません。私がDateBoxタグをコメントアウトすると、フォームはOKに送信されます。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

は、Submitをクリックすると、あなたが出荷日を入力していますか？ –

はい。私は可能なすべてのことを試しました。 –

名前属性なしでeasyui dateboxを定義しようとしましたか？公式文書の例にはそれがありません。それが問題だと私は驚くだろう。 –

EasyUIの日付ボックスコントロールがで、テキストボックスを非表示にして、それ自身のテキストボックスをDOMに挿入すると、この問題が発生しているようです。 EasyUIは、新しく追加されたテキストボックスのHTML5 required属性を尊重していません。傷害に侮辱を加えるために、元のテキストボックスにはまだrequired属性があるので、Chromeがそれを検証しようとすると、検証は失敗し、Chromeは元のテキストボックスにフォーカスを戻そうとします。現在Chromeは非表示になっており、フォーカスを受け取ることができないため、Chromeは何をすべきかわからず、その時点でプロセスを停止します。この問題を回避するには

、私の解決策は、（あなたがHTMLのフォームの検証を引き続き使用する場合は）できるだけ最低限として、マークアップを行うことでEasyUIのdateboxコントロールを初期化するためにEasyUIのAPIを使用することです：

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のそのことについては制御し）、それは何のために仕事の周りにあるので、I EasyUIコントロールの欠点として認識されますが、これはHTML5検証のためにはうまくいくはずです。

その他：EasyUIの日付ボックスには、初期化時に渡される可能性のあるrequiredオプションがありますが、EasyUIのカスタムバリデーターで動作し、HTML5の検証ではありません。

出典：

出典

2016-09-19 02:41:28

EasyUIの代わりに何をお勧めしますか？ –

私はあなたには役に立たないので「依存する」とは言いませんが、それはあなたの要件/アーキテクチャ/制約を知らなくても答えが難しいという疑問です。たとえば、以前のバージョンのjQuery（1.6）を使用しているため、従来のアプリケーションで作業していると仮定しています。純粋なHTML5コントロールを提案することを躊躇します（）。しかし元の例からは、その前提が正しくない可能性があります。 –

純粋なHTML5コントロールを備えた最新のGUIを想定していればOKです。 EasyUIより堅固なもの。たぶん剣道、JQWidgets、またはWijmo？ –

EasyUI DateBox - フォームを送信できません

答えて

関連する問題