Validate Sum (Total) of Group TextBoxes using jQuery in ASP.Net MVC

nabilabo...

SOLVED CLOSED ACTIVE ANSWERED
User: nabilabolo
Posted: on May 25, 2021 11:49 PM
Forum: ASP.Net MVC
Answer: 1
Views: 2386
Sample Code: Download

Hi,

I have 6 textboxes which divided into 2 groups such as group A and B.

i want to validate that amount of user keyin in each textbox must not more than 100 and the sum of those 3 textboxes for each group must not more than 100.

How can i do this validation?

<tr class="spaceUnder2">
    <td width="15%" style="padding:0 15px 0 15px;">
        @Html.TextBoxFor(m => m.A1 new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.WARP_ENDS_PCT1, "", new { @class = "text-danger" })
    </td>
</tr>
<tr class="spaceUnder2">
    <td width="15%" style="padding:0 15px 0 15px;">
        @Html.TextBoxFor(m => m.A2 new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.WARP_ENDS_PCT1, "", new { @class = "text-danger" })
    </td>
</tr>
<tr class="spaceUnder2">
    <td width="15%" style="padding:0 15px 0 15px;">
        @Html.TextBoxFor(m => m.A3 new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.WARP_ENDS_PCT1, "", new { @class = "text-danger" })
    </td>
</tr>
<tr class="spaceUnder2">
    <td width="15%" style="padding:0 15px 0 15px;">
        @Html.TextBoxFor(m => m.B1 new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.WARP_ENDS_PCT1, "", new { @class = "text-danger" })
    </td>
</tr>
<tr class="spaceUnder2">
    <td width="15%" style="padding:0 15px 0 15px;">
        @Html.TextBoxFor(m => m.B2 new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.WARP_ENDS_PCT1, "", new { @class = "text-danger" })
    </td>
</tr>
<tr class="spaceUnder2">
    <td width="15%" style="padding:0 15px 0 15px;">
        @Html.TextBoxFor(m => m.B3 new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.WARP_ENDS_PCT1, "", new { @class = "text-danger" })
    </td>
</tr>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 5

Reply
ANSWER
User: dharmendr
Replied: on May 26, 2021 08:38 AM
Report

Hi nabilabolo,

Check this example. Now please take its reference and correct your code.

Model

public class Customer
{
    public string A1 { get; set; }
    public string A2 { get; set; }
    public string A3 { get; set; }
    public string B1 { get; set; }
    public string B2 { get; set; }
    public string B3 { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View(new Customer());
    }
}

View

@model Group_TextBox_Validation_MVC.Models.Customer

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.g1').keyup(function () {
                if (!ValidateGroupSum($('.g1'))) {
                    $(this).val('');
                }
            });
            $('.g2').keyup(function () {
                if (!ValidateGroupSum($('.g2'))) {
                    $(this).val('');
                }
            });
        });

        function ValidateGroupSum(ele) {
            var sum = 0;
            $.each($(ele), function () {
                sum += parseFloat($(this).val());
            });
            if (sum > 100) {
                alert('Group sum must not more than 100.');
                return false;
            }

            return true;
        }
    </script>
</head>
<body class="container">
    @using (Html.BeginForm())
    {
        <table>
            <tr class="spaceUnder2">
                <td width="15%" style="padding:0 15px 0 15px;">
                    A1 : @Html.TextBoxFor(m => m.A1, new { @class = "form-control g1" })
                </td>
            </tr>
            <tr class="spaceUnder2">
                <td width="15%" style="padding:0 15px 0 15px;">
                    A2 : @Html.TextBoxFor(m => m.A2, new { @class = "form-control g1" })
                </td>
            </tr>
            <tr class="spaceUnder2">
                <td width="15%" style="padding:0 15px 0 15px;">
                    A3 : @Html.TextBoxFor(m => m.A3, new { @class = "form-control g1" })
                </td>
            </tr>
            <tr class="spaceUnder2">
                <td width="15%" style="padding:0 15px 0 15px;">
                    B1 : @Html.TextBoxFor(m => m.B1, new { @class = "form-control g2" })
                </td>
            </tr>
            <tr class="spaceUnder2">
                <td width="15%" style="padding:0 15px 0 15px;">
                    B2 : @Html.TextBoxFor(m => m.B2, new { @class = "form-control g2" })
                </td>
            </tr>
            <tr class="spaceUnder2">
                <td width="15%" style="padding:0 15px 0 15px;">
                    B3 : @Html.TextBoxFor(m => m.B3, new { @class = "form-control g2" })
                </td>
            </tr>
        </table>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    }
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Validate Sum (Total) of Group TextBoxes using jQuery in ASP.Net MVC

Company

Explore

Follow us

Contact Us