CODEWITHSUNDEEP
javascriptjqueryformsjspjquery-easyui
Jan Bodnar
Jan Bodnar

Reputation: 11657

EasyUI DateBox - cannot submit a form

How to send an HTML form containing an EasyUi DateBox? The form cannot be submitted. Nothing happens when clicked on the Submit button. When I comment out the DateBox tag, the form is submitted OK.

<!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>

This is the HTML form.

<%@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>

This is the JSP page, which should receive the request parameters.

Upvotes: 2

Views: 929

Answers (1)

Steve G
Steve G

Reputation: 13442

It looks like you're getting this issue because the EasyUI datebox control is hiding your textbox and inserting it's own textbox in the DOM. EasyUI isn't honoring the HTML5 required attribute on the newly added textbox. To add insult to injury, since your original textbox [now hidden] still has the required attribute, when Chrome attempts to validate it, validation fails and Chrome attempts to put focus back in your original textbox. Since your's is now hidden and can't receive focus, Chrome doesn't know what to do and stops the process at that point.

To get around this, my solution (if you want to continue to use HTML form validation) is to use EasyUI's api to initialize the EasyUI datebox control by making the markup as bare-bones as possible:

HTML:

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

And initialize the EasyUI datebox and add the required attribute directly to the newly created EasyUI datebox (with a slightly reasonable date format pattern).

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

Personally, I'm not a huge fan of this solution (or of EasyUI controls for that matter), because it is a work-around for what I perceive as deficiencies in the EasyUI controls, but this should work in a pinch for HTML5 validation.

Aside: The EasyUI datebox does have it's own required option that may be passed during initialization, but it's for working with EasyUI's custom validator and not HTML5 validation, as of the writing of this post.

Sources:

Upvotes: 2

Related Questions