CODEWITHSUNDEEP
c#jqueryasp.net-mvcvalidationmodel-view-controller
Jayaraj.K
Jayaraj.K

Reputation: 928

How to handle multiple text box in mvc

I have model Person 

 [DisplayName("First Name")]
[Required("This field is required")]
public string FirstName { get; set; }

[DisplayName("Last Name")]
[Required("This field is required")]
public string LastName { get; set; }

[UmbracoDisplayLocalised("Title")]
public string Title { get; set; }

[DisplayName("Email")]
[Email("Please enter a valid email")]
[Required("This field is required")]
public string Email { get; set; }

This model is refered in a view as follows.

    <div class="fields" id="event_additional_attendee" style="display:none;">


        <ul>
            <li>
                @Html.TextBoxFor(x => x.Email, new { placeholder = "Email Id" })
                @Html.ValidationMessageFor(x => x.Email, "", new { @class = "required" })
            </li>

            <li>
                @Html.TextBoxFor(x => x.FirstName, new { placeholder = "First Name" })
                @Html.ValidationMessageFor(x => x.FirstName, "", new { @class = "required" })
            </li>
            <li>
                @Html.TextBoxFor(x => x.LastName, new { placeholder = "Last Name" })
                @Html.ValidationMessageFor(x => x.LastName, "", new { @class = "required" })
            </li>
            <li>
                @Html.TextBoxFor(x => x.Title, new { placeholder = "Title" })
                @Html.ValidationMessageFor(x => x.Title, "", new { @class = "required" })
            </li>

        </ul>

    </div>
    <div class="toplink">
        <p><a href="#" id="plus1" onclick="addForms()">+ Add More</a></p>
        <p><a href="#" id="minus1" onclick="removeForms()">- Remove </a></p>
    </div>
</div>

Each time a Add more link is clicked above mentioned DOM structure is repeated with model properties,which is handled by Jquery. Thus multiple text box with same names are generated. I would like to know how to validate (both server side and client) each text box separately.I know the question is a repetition, but I couldn't find a better solution .

Upvotes: 0

Views: 943

Answers (3)

JEV
JEV

Reputation: 2504

Generate that view through Visual Studio as Strongly Typed. And then it will auto validate it all for you, assuming your provided it with that model.

Upvotes: 0

Linh Tuan
Linh Tuan

Reputation: 458

i have etc same your code:

this code html:

<div class="grid-4"><div class="form-label"><label>Rooms</label>@Html.DropDownList("Room",  new SelectList(Model.Rooms))</div></div>

this code js:

<script type="text/javascript">
$(document).ready(function() {
    $('#Room').change(function(){
        var valueRoomId = $.trim($("#Room").val()).toString();
        $("#ol").empty();
        if(valueRoomId >= "2") {

            for (var i = 2; i <= valueRoomId; i++) {
                $("#ol").append("<div class='grid-4'><div class='form-label'><label></label><h4>Room" + i + "</h4>");

                $("#ol").append("<div class='grid-4'>" +
                    "<div class='formErrorContent' style='color: red;float: right;' " +
                    "data-valmsg-for='Adults_" + i + "' data-valmsg-replace='true'></div>" +
                    "<div class='form-label'><label>Adults</label><select class='required' " +
                    "data-val-required='This field is required.'" +
                    "name='Adults_" + i + "' id='Adults_" + i + "'>" +
                    "<option value=''>---Select Adults---</option>" + "@Html.Raw(adults.ToString())" + "</select></div></div>");

                $("#ol").append("<div class='grid-4 last-grid'>" +
                    "<div class='formErrorContent' style='color: red;float: right;' " +
                    "data-valmsg-for='Childrens_" + i + "' data-valmsg-replace='true'></div>" +
                    "<div class='form-label'><label>Childrens</label><select class='required'" +
                    "data-val-required='This field is required.'" +
                    "name='Childrens_" + i + "' id='Childrens_" + i + "'>" +
                "<option value=''>---Select Childrens---</option>" +
                "@Html.Raw(childrens.ToString())" +
                + "</select></div></div>");
        }
    }
   });
});

Upvotes: 0

Murali Murugesan
Murali Murugesan

Reputation: 22619

jQuery validation rules are defined along with the form name of each control.

In your case, you have same name defined for new cloned controls, which will fire the matched rule(s) for the given control name.

To validate each textbox seperately use element()

Triggers element validation programmatically.

var validator = $( "#myform" ).validate();
validator.element( "#myselect" ); // validate individual

Upvotes: 1

Related Questions