Uploaded image for project: 'Wicket'
  1. Wicket
  2. WICKET-5289

setRequired(true) should add the HTML5 "required" attribute on <input> and <textarea> elements

    XMLWordPrintableJSON

Details

    • Improvement
    • Status: Resolved
    • Major
    • Resolution: Fixed
    • 6.9.1
    • 6.10.0, 7.0.0-M1
    • wicket
    • None

    Description

      calling setRequired(true); only activates Wicket's own required validation.

      It should also set "required" attribute supported by HTML5 browsers so client-side UI experience will also match.

      Example:

      <form class="form form-horizontal" wicket:id="form">
      	<div class="control-group">
      		<label class="control-label" wicket:for="startDateFld">Start date</label>
      		<div class="controls">
      			<input type="date" wicket:id="startDateFld" style="margin-right: 10px" required/>
      		</div>
      	</div>
      	<div class="control-group">
      		<label class="control-label" wicket:for="endDateFld">End date</label>
      		<div class="controls">
      			<input type="date" wicket:id="endDateFld" style="margin-right: 10px"/>
      		</div>
      	</div>
      </form>
      
      		final String datePattern = "yyyy-MM-dd";
      		startDateFld = new DateTextField("startDateFld", startDateModel, datePattern) {
      			@Override
      			protected String getInputType() {
      				return "date";
      			};
      		};
      		startDateFld.setRequired(true);
      		// buggy inside Modal
      //		final DatePicker dateStartPicker = new DatePicker();
      //		dateStartPicker.setShowOnFieldClick(true);
      //		dateStartPicker.setAutoHide(true);
      //		startDateFld.add(dateStartPicker);
      		form.add(startDateFld);
      		
      		final DateTextField endDateFld = new DateTextField("endDateFld", endDateModel, datePattern) {
      			@Override
      			protected String getInputType() {
      				return "date";
      			};
      		};
      		endDateFld.setRequired(true);
      

      startDateFld with "required" added manually is rendered correctly by Chrome. the endDateFld has a clear button, which is incorrect, because the field is required.

      http://img841.imageshack.us/i/ydv0.png/

      Attachments

        1. datetextfield-required.png
          19 kB
          Hendy Irawan

        Activity

          People

            mgrigorov Martin Tzvetanov Grigorov
            ceefour Hendy Irawan
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: