CODEWITHSUNDEEP
jqueryasp.net-mvc-3
user335160
user335160

Reputation: 1362

add error message to the current Validation Summary

I have a collection of textbox that created dynamically (through button click), and all the textbox are required. An error message should be added to the current validation summary once the textbox is empty.Any help on how to do this one.

Javascript Code

var rowsid = 0;
    // Add button functionality
    $("#btnAddButton").live("click", function () {
        rowsid++;
        var master = $(this).parents().find("table.dynamictable"); //$(this).parents("table.dynatable");

        // Get a new row based on the prototype row
        var prot = master.find(".prototype").clone();
        prot.attr("class", "");
        prot.find(".id").attr("value", "00000" + rowsid);
        master.find("tbody").append(prot);
    });

HTML Code

<div class="msg-body">
        <table class="dynamictable">
            <thead>
                <tr>
                    <th style="display: none"></th>
                    <th>Package Name</th>
                    <th>Package Cost</th>
                    <th>No. of Attendees</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                <tr class="prototype">
                    <td style="display: none"><input type="hidden" name="id[]" value="" class="id" /></td>
                    <td><input type="text" name="packagename[]" value="" class="pkname" data-val-required="This field is required"  /></td>
                    <td><input type="text" name="packagecost[]" value="0" class="pkcost" style="text-align: right" /></td>
                    <td><input type="text" name="noofattendees[]" value="0" class="nfattendees" style="text-align: right"/></td>
                    <td>@Html.ActionImage("", null, "~/Content/Images/delete.gif", "Delete", new { @class = "deleterows" }) </td>
                </tr>
            </tbody>
        </table>
        <div style="padding:20px 0 20px 100px "><input type="button" id="btnAddButton" value="Add New" class="button addbutton"/></div>
        </div>

Upvotes: 0

Views: 707

Answers (2)

karaxuna
karaxuna

Reputation: 26940

function refreshValidation() {
    $("form").removeData("validator");
    $("form").removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse("form");
}

This will revalidate texboxes that you added dynamically

Upvotes: 1

Dipak
Dipak

Reputation: 12190

Use HTML5 required="required" attribute, but it won't work in old versions of IE

<input type="text" name="usrname" required="required" />

Detailed explanation - http://www.w3schools.com/html5/att_input_required.asp

Upvotes: 0

Related Questions