MVC validation with only HTML

Question

I am working on a contact us form and I was able to do a successful validation but i have a small problem,

when I submit and miss one of the required values, the form comes back with the error message and does not keep the value and I have noticed that only happens if I use HTML only, it will work fine with HTML helpers.

Here is a snippet of my code:

<div class="form-group">
                        @Html.LabelFor(model => model.FirstName, "First Name")
                        <div>
                            <input class="form-control" name="FirstName" id="FirstName" data-val="true" type="text" value="" />
                            @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })
                        </div>
                    </div>

But it will work for the last name field:

<div class="form-group">
                        @Html.LabelFor(model => model.LastName, "Last Name")
                        <div>
                            @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })
                        </div>
                    </div>

Filling the info:

Notice after submitting the last name stays there but the first name disappears:

Any help will be appreciated :)

Why would you generate the html manually? The helpers generate the correct html including correctly setting the value attribute based on the ModelState value. — user3559349
– user3559349, Commented Feb 19, 2016 at 22:47
And your missing the data-val-required attribute so your not going to get client side validation so you may as well just delete your data-val="true" attribute - its just pointless — user3559349
– user3559349, Commented Feb 19, 2016 at 23:00

Shyju · Accepted Answer · 2016-02-19 23:00:36Z

1

Because your input tag's value property value is set to an empty string.

You should use the Html.TextBoxFor helper method to generate the inuput field and it will show you the value you posted when your model validation fails. The helper method will also generate the relevant html5 attribute needed for client side unobtrusive validation.

@model ContactViewModel 
@using(Html.BeginForm())
{
   @Html.TextBoxFor(s=>s.FirstName)
   @Html.ValidationMessageFor(model => model.FirstName)
   <!-- Other fields -->
   <input type="submit" />               
}

Assumin your HttpPost action method is returning the posted model back to the view which Model validation fails

[HttpPost]
public ActionResult Contact(ContactViewModel model)
{
  if(ModelState.IsValid)
  {
     // to do : return something
  }
  return View(model);
}

answered Feb 19, 2016 at 23:00

Shyju

220k106 gold badges421 silver badges499 bronze badges

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

Collectives™ on Stack Overflow

MVC validation with only HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related