In my .chtml code i am adding new element on click of button in page but i also want add @Html.ValidationMessageFor(m => m[i].Name) attribute to newly added element becouse the valdiation message are come from resource file whichi is already define in model...how can give this validation from java script...here is my code
@model List<kollabexlite.models.viewmodels.inviteuser>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>UploadFile</title>
<link href="@Url.Content("~/Content/inviteuser.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.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>
<script type="text/javascript">
var intTextBox = 4;
function addelement() {
intTextBox = intTextBox + 1;
var hfCount = document.getElementById("hfFileCount");
var contentID = document.getElementById("divFileUpload");
var br = document.createElement("br");
var lbl1 = document.createElement("label");
lbl1.innerHTML = "Name";
var txtinput1 = document.createElement("input")
txtinput1.setAttribute("type", "text")
txtinput1.setAttribute("id", "Name" + intTextBox);
txtinput1.setAttribute("name", "[" + hfCount.value + "].Name");
var lbl2 = document.createElement("label")
lbl2.innerHTML = "Email";
var txtinput2 = document.createElement("input")
txtinput2.setAttribute("type", "text")
txtinput2.setAttribute("id", "Email" + intTextBox);
txtinput2.setAttribute("name", "[" + hfCount.value + "].Email");
hfCount.value = (parseInt(hfCount.value) + 1).toString();
contentID.appendChild(lbl1);
contentID.appendChild(txtinput1);
contentID.appendChild(lbl2);
contentID.appendChild(txtinput2);
contentID.appendChild(br);
return (false);
}
</script>
</head>
<body>
<div>
@* , FormMethod.Post, new { enctype = "multipart/form-data", id = "form1" *@
@* Working code*@
@using (Html.BeginForm("InviteUser", "User", FormMethod.Post, new { enctype = "multipart/form-data", id = "form1" }))
{
@Html.ValidationSummary(true)
<div id="divFileUpload">
@{var intTextBox = 2;}
@for (var i = 0; i < intTextBox; i++)
{
<label>Name</label>
@Html.TextBoxFor(m => m[i].Name, new { id = "Name" + i })
@Html.ValidationMessageFor(m => m[i].Name)
<label>Email</label>
@Html.TextBoxFor(m => m[i].Email, new { id = "Email" + i })<br />
@Html.ValidationMessageFor(m=>m[i].Email)
}
</div>
<input type="submit" id="submit" value="Click Here"/>
}
<button onclick="javascript:addelement();">ADD</button>
<div id="content"></div>
<button id="add"></button>
<input id="hfFileCount" type="hidden" value="2" />
</div>
</body>
</html>
</kollabexlite.models.viewmodels.inviteuser>
and model is
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel.DataAnnotations;
using KollabExLite.Resources;
using System.Web;
using System.Web.Mvc;
namespace KollabExLite.Models.ViewModels
{
public class InviteUser
{
[Required(ErrorMessageResourceType = typeof(ModelResources), ErrorMessageResourceName = "NameRequired")]
[RegularExpression(@"[a-zA-Z.\s]+", ErrorMessageResourceType = typeof(ModelResources), ErrorMessageResourceName = "NameFormatError")]
[Display(Name = "FullNameDisplay", ResourceType = typeof(ModelResources))]
[StringLength(255, ErrorMessageResourceType = typeof(ModelResources), ErrorMessageResourceName = "FullNameLengthExceeded")]
[DataType(DataType.Text)]
public string Name { get; set; }
[Required(ErrorMessageResourceType = typeof(ModelResources), ErrorMessageResourceName = "EmailRequired")]
[Display(Name = "EmailDisplay", ResourceType = typeof(ModelResources))]
[DataType(DataType.EmailAddress)]
public string Email { get; set; }
}
}
for first two input box its perfectly give me validation but for on click of add button added new input t doesnt provide me validation