Mobile UI Form Elements > Text Input Elements > Text Inputs |
The Title element is a good example of a Text Input element. In a regular jQuery Mobile application, you'll create a text input in the following way:
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" />
</div>
In the MVC Mobile Application, the Create.cshtml View contains the markup and Razor syntax used to create, for example, the Title input area:
<li data-role="fieldcontain">
@Html.LabelFor(model => model.Title)
@Html.EditorFor(model => model.Title)
@Html.ValidationMessageFor(model => model.Title)
</li>
When combined with the code from the TahDoList Model, which marks the input element as required:
[Required]
public string Title { get; set; }
This creates a text input element that resembles the following image:
If you try move out of the Title input element or save your form without entering a title for the Task, it will display the following Validation Error: