How can i develop Watermark form validation in mvc3?

Question

I am new to mvc3. I want to develop form validation using Jquery Watermark effect. If any error occurs the textbox border highlight in red color and error validation display in textbox only.

My Model is like this,

public class Registration
    {
        [Required]
        [Display(Name = "Name")]
        public string Name { get; set; }

        [Required]
        [Display(Name = "Email")]
        public string Email { get; set; }

        [Required]
        [Display(Name = "Phone No")]
        public string PhoneNo { get; set; }

        [Required]
        [Display(Name = "City")]
        public string City { get; set; }

        [Required]
        [Display(Name = "Country")]
        public string Country { get; set; }
    }

My View Page Code is like this

@model WaterMarkFormInput.Models.Registration
<script type="text/javascript">
    $(document).ready(function () {
        $('#name').Watermark("Your Name");
        $('#email').Watermark("Your Email");
        $('#phoneno').Watermark("Your PhoneNumber");
        $('#city').Watermark("Your City");
        $('#country').Watermark("Your Country");
    })

</script>

<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.watermarkinput.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Registration</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Name, new { id="name"})
            @Html.ValidationMessageFor(model => model.Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Email, new { id = "email" })
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.PhoneNo)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.PhoneNo, new { id = "phoneno" })
            @Html.ValidationMessageFor(model => model.PhoneNo)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.City)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.City, new { id = "city" })
            @Html.ValidationMessageFor(model => model.City)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Country)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Country, new { id = "country" })
            @Html.ValidationMessageFor(model => model.Country)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

When running my application, it will show watermark effect like below image.

https://i.stack.imgur.com/XcLxZ.png

But when i press create button form validation stop working. when i comment the script to appy watermark it will show my form validation like this

https://i.stack.imgur.com/iEym3.png

But i want validation text in textbox and how can i do this? waiting for the reply :)

Answer 1

Watermark and validation aren't the same thing. (I am sure I am not saying something new to you, but please follow my thought) However, they both are defined in a very similar fashion, which is through data annotation. You doing it right for validation. To define watermark, do this:

[Display(Name = "Name", Description = "This is tooltip", Prompt = "This is watermark")]
public string Name { get; set; }

Inside <YourApp>/Views/Shared/ create folder called EditorTemplates, and inside <YourApp>/Views/Shared/EditorTemplates define String.cshtml, Text.cshtml, Multiline.cshtml etc for all types you require watermark to appear in the following manner:

Update

This is String.cshtml, Text.cshtml razor views (2 of them) put into <YourApp>/Views/Shared/EditorTemplates folder (look exactly the same, except the file name):

End Update

// string, text 
@Html.TextBox(string.Empty, ViewData.TemplateInfo.FormattedModelValue, new
{
    @class = "text-box single-line",
    placeholder = ViewData.ModelMetadata.Watermark,
    title = ViewData.ModelMetadata.Description
})

Update

This is <YourApp>/Views/Shared/EditorTemplates/MultilineText.cshtml razor view:

End Update

// multiline
@Html.TextArea(string.Empty, ViewData.TemplateInfo.FormattedModelValue.ToString(), 0, 0, new
    {
        @class = "text-box multi-line",
        placeholder = ViewData.ModelMetadata.Watermark,
        title = ViewData.ModelMetadata.Description
    })

and in the view you call @EditorFor(m => m.Name).

Those are HTML5 and work like a charm (tested in Chrome and IE9)

Hope this helps

Update

Editor templates are exactly as name suggests - templates for editor, so when in the view you call EditorFor having editor template for String or Text under shared as I showed, you effectively change the default for string or Text etc. - how it shown, and in this case, you display it as it would by default, adding couple html5 params, like placeholder (watermark) and title (tooltip). You define what their values are in the view model, adding Prompt = for watermark and Description = for tooltip. Its basically mapping between ASP MVC definitions and HTML5:

• Description becomes tooltip (industry name) and called title in html5
• Prompt becomes watermark (industry name) and called placeholder in html5