4

I am displaying the datetime values in a readonly textbox(type="text") and it is rendered correctly. But when I try to save it, HTML5 highlights the textbox border which I think means that it has failed HTML5 date validation. Is it because of the format? If it is then how to change the format?. The other option, if possible, could be to disable the default html5 validation but I am curious to know its behaviour. The server side code is below:

<div class="panel-body in">
<fieldset class="scheduler-border">
    <div class="form-group form-group-textarea">
        <div class="col-sm-4">
            @Html.LabelFor(m => m.LastUpdatedImage, new { @class = "control-label" })
        </div>
        <div class="col-sm-8">
            @Html.TextBoxFor(m => m.LastUpdatedImage, new { @class = "form-control", @readonly = "readonly" })
        </div>
    </div>
    <div class="form-group form-group-textarea">
        <div class="col-sm-4">
            @Html.LabelFor(m => m.LastUpdated, new { @class = "control-label" })
        </div>
        <div class="col-sm-8">
            @Html.TextBoxFor(m => m.LastUpdated, new { @class = "form-control", @readonly = "readonly" })
        </div>
    </div>
    <div class="form-group form-group-textarea">
        <div class="col-sm-4">
            @Html.LabelFor(m => m.LastPrinted, new { @class = "control-label" })
        </div>
        <div class="col-sm-8">
            @Html.TextBoxFor(m => m.LastPrinted, new { @class = "form-control", @readonly = "readonly" })
        </div>
    </div>
    <div class="form-group form-group-textarea">
        <div class="col-sm-4">
            @Html.LabelFor(m => m.LastExported, new { @class = "control-label" })
        </div>
        <div class="col-sm-8">
            @Html.TextBoxFor(m => m.LastExported, new { @class = "form-control", @readonly = "readonly" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-12">
            <input type="button" onclick="javascript:GetPropertySummaryDetails(@PropertyCode);" name="ShowSummary" id="ShowSummary" class="btn btn-primary" value="Export" />
        </div>
    </div>
</fieldset>

The html which is generated for one of the textbox is:

<input class="form-control input-validation-error" data-val="true" data-val-date="The field Images Updated must be a date." data-val-required="The Images Updated field is required." id="LastUpdatedImage" name="LastUpdatedImage" readonly="readonly" type="text" value="21/05/2015 15:51:49">

The image is below: enter image description here

man_luck
  • 1,605
  • 2
  • 20
  • 39
  • Don't know why, but the `type` is set to `text`, not `datetime-local`, so there is no HTML5 date validation done. (also see [this post](http://stackoverflow.com/q/21263515/993547) why it isn't `datetime`...) – Patrick Hofman May 22 '15 at 07:46
  • 1
    Are you using `jquery.validate.unobtrusive.js`? If so then you would need to use `jquery.globalize` or modify the `$.validator.addMethod()` -refer [this answer](http://stackoverflow.com/questions/27285458/jquery-ui-datepicker-and-mvc-view-model-type-datetime/27286969#27286969) because `jquery.validate` uses the `MM/dd/yyyy` format for validating dates (whereas yours is `dd/MM/yyyy`) –  May 22 '15 at 07:58
  • 1
    I tried $.validator.addMethod() but it did not work. may be becuase I am not using any datetimepicker; just a readonly textbox which displays the values. I have included jquery.globalize but cannot remove jquery.validate.unobtrusive.js as it is a bundle used in layout page and I am not confident about what impact it might have on other pages. – man_luck May 22 '15 at 09:18
  • 1
    You don't need to remove `jquery.validate.unobtrusive.js` (`jquery.globalize` is just on top of that, and `jquery.validate.js`). The example using `$.validator.addMethod()` was for the `jquery-ui datepicker`, but you can easily modify that to parse the textbox to the correct format. However, the easiest solution is to use hidden inputs so that the controls are not validated. –  May 23 '15 at 02:51

1 Answers1

3

Firstly this is not an issue related to HTML5 controls. Its related to jquery.validate.js and jquery.validate.unobtrusive.js` validating the form controls. You could remove those files if there are no other validation required on the page (e.g. in the other tabs) but as you have indicated in your comments, this may not be an option.

Another solution is to use hidden inputs (by default, hidden inputs are not validated) and then render the DateTime value inside a <div> element that is styled to look like your input (borders etc)

<div class="col-sm-8">
  @Html.HiddenFor(m => m.LastUpdatedImage)
  <div class="textbox">
    @Html.DisplayFor(m => m.LastUpdatedImage)
  </div>
</div>

and then add a css definition for the textbox class based on your current css for input[type="tetbox"]