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

Improve this question
4
  • 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 why it isn't datetime...) Commented May 22, 2015 at 7: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 because jquery.validate uses the MM/dd/yyyy format for validating dates (whereas yours is dd/MM/yyyy) Commented May 22, 2015 at 7: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. Commented May 22, 2015 at 9: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. Commented May 23, 2015 at 2:51

1 Answer 1

Reset to default
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"]

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.