Validating multiple text boxes in single JavaScript Function

Question

i have 7 textbox and i want to validate as Required field OnClientClick click of a button named as Update so is there any way i could do it using Javascript i have tried this code but it's not working as one of them ps: i am new to JS

   function fnCheck(val) {
            var v = val.id.split('_')[1];
            var merter = document.getElementById('GridSubMeter_' + v + '_txtMeterIdn').value.trim();
            var Billper = document.getElementById('GridSubMeter_' + v + '_txBillPer').value.trim()
            var Endkwh = document.getElementById('GridSubMeter_' + v + '_txEndKwh').value.trim();
            var startkwh = document.getElementById('GridSubMeter_' + v + '_txStartKwh').value.trim();
            var ReadEndDate = document.getElementById('GridSubMeter_' + v + '_txReadEndDate').value.trim();
            var ReadStartDate = document.getElementById('GridSubMeter_' + v + '_txReadStartDate').value.trim();
            var CTFACT = document.getElementById('GridSubMeter_' + v + '_txCTFact').value.trim();
            if (merter != '') {
                return true;
            }
            else {
                alert("Meter Identifier is Required Field");
            return false;
        }

        if (Billper != '') {
            return true;
        }
        else {
            alert("Bill Period is Required Field");
            return false;
        }

        if (Endkwh != '') {
            return true;
        }
        else {
            alert("EndKwh is Required Field");
            return false;
        }
        if (startkwh != '') {
            return true;
        }
        else {
            alert("StartKwh is Required Field");
            return false;
        }
        if (ReadEndDate != '') {
            return true;
        }
        else {
            alert("Read EndDate is Required Field");
            return false;
        }

        if (ReadStartDate != '') {
            return true;
        }
        else {
            alert("Read StartDate is Required Field");
            return false;
        }
        if (CTFACT != '') {
            return true;
        }
        else
        { alert("CT Factor is Required Field");
        return false;
        }
        }
 <asp:Button ID="btn_Update" Style="background-color: #B2DE94; width: 40px"  CausesValidation="false" runat="server"  OnClientClick="fnCheck(this);" Text="Update" CommandName="Update" />

have tried it but it's not working for some weird reason in editable gridview — user7917367
– user7917367, Commented May 8, 2017 at 10:34

Community · Accepted Answer · 2017-05-23 12:10:11Z

0

Try below

<asp:TemplateField HeaderText="">
      <ItemTemplate>
          <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
           <asp:RequiredFieldValidator ID="rfv" runat="server" ControlToValidate="TextBox3" ValidationGroup="gridview" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
      </ItemTemplate>
        </asp:TemplateField>
      <asp:TemplateField HeaderText="">
            <ItemTemplate>
                <asp:Button ID="Button2" runat="server" Text="Button" ValidationGroup="gridview" CausesValidation="true" />
            </ItemTemplate>
        </asp:TemplateField>

Code has been taken from here

I have verified with sample project and works for your scenario

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered May 8, 2017 at 10:55

Karthick Raju

79710 silver badges34 bronze badges

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

5 Comments

Karthick Raju Over a year ago

What do you mean JS solution? If you use GridView then it's asp.net, right? If so you can achieve the same with just RequiredFieldValidator. JS code not required for this scenario. Like I said, I tried the code and it's throwing error message set for the field

user7917367 Over a year ago

if Required validator was working i would not have ben using JS

VDWWD Over a year ago

Sounds like a X-Y Problem to me. Try fixing the original problem: The Validator Control not working.

Karthick Raju Over a year ago

Yes VDWWD. I don't know how it's not working for Deepak Jain. I have posted 2 working codes with screenshot. Hope, issue would have been resolved for him

user7917367 Over a year ago

actually i have made CausesValidation="false" as my rowupdating event was faling because of it @KarthickRaju

Karthick Raju · Accepted Answer · 2017-05-08 11:46:47Z

Deepak,

Below is my Gridview code

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="DataKeyId" DataSourceID="SqlDataSource1" EnableModelValidation="True">
            <Columns>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:Button ID="Button2" runat="server" Text="Button" ValidationGroup="gridview" CausesValidation="true" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfv11" runat="server" ControlToValidate="TextBox1" ValidationGroup="gridview" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfv2" runat="server" ControlToValidate="TextBox2" ValidationGroup="gridview" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfv3" runat="server" ControlToValidate="TextBox3" ValidationGroup="gridview" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfv4" runat="server" ControlToValidate="TextBox4" ValidationGroup="gridview" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
                    </ItemTemplate>
                </asp:TemplateField>                    
            </Columns>
        </asp:GridView>

By clicking on button avail inside the GridView, below attachment error appears

Karthick Raju · Accepted Answer · 2017-05-08 12:01:14Z

Below is the another set of version to throw error message at row level

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="YourDataKey" DataSourceID="SqlDataSource1" EnableModelValidation="True">
            <Columns>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:Button ID="Button2" runat="server" Text="Button" ValidationGroup = '<%# "Group_" + Container.DataItemIndex %>' CausesValidation="true" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfv1" runat="server" ControlToValidate="TextBox1" ValidationGroup = '<%# "Group_" + Container.DataItemIndex %>'  ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfv2" runat="server" ControlToValidate="TextBox2" ValidationGroup = '<%# "Group_" + Container.DataItemIndex %>'  ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfv3" runat="server" ControlToValidate="TextBox3" ValidationGroup = '<%# "Group_" + Container.DataItemIndex %>' ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="rfv4" runat="server" ControlToValidate="TextBox4" ValidationGroup = '<%# "Group_" + Container.DataItemIndex %>' ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
                    </ItemTemplate>
                </asp:TemplateField>                    
            </Columns>
        </asp:GridView>

Third row button is clicked in the below attachment and second column has value. So, error appears for the rest of the controls of the row

user7917367 · Accepted Answer · 2017-05-09 02:56:05Z

ok i have worked on my JS function and it worked for me.hope it will work for everyone else.in my code i have taken a variable

success which is working as a flag and i am checking it twice and returning true at the end so that if one of the textbox is not empty and other not it will not return true. sorry for poor editing

 function fnCheck(val) {
        var success = true;
        var v = val.id.split('_')[1];
        var merter = document.getElementById('GridSubMeter_' + v + '_txtMeterIdn').value.trim();
        var Billper = document.getElementById('GridSubMeter_' + v + '_txBillPer').value.trim()
        var Endkwh = document.getElementById('GridSubMeter_' + v + '_txEndKwh').value.trim();
        var startkwh = document.getElementById('GridSubMeter_' + v + '_txStartKwh').value.trim();
        var ReadEndDate = document.getElementById('GridSubMeter_' + v + '_txReadEndDate').value.trim();
        var ReadStartDate = document.getElementById('GridSubMeter_' + v + '_txReadStartDate').value.trim();
        var CTFACT = document.getElementById('GridSubMeter_' + v + '_txCTFact').value.trim();
        debugger;
        if (merter != '') {

        }
        else {
            alert("Meter Identifier is Required Field");
            success = false;
    }

    if (Billper != '') {

    }
    else {
        alert("Bill Period is Required Field");
        success = false;
    }

    if (Endkwh != '') {

    }
    else {
        alert("EndKwh is Required Field");
        success = false;
    }
    if (startkwh != '') {

    }
    else {
        alert("StartKwh is Required Field");
        success = false;
    }
    if (ReadEndDate != '') {

    }
    else {
        alert("Read EndDate is Required Field");
        success = false;
    }

    if (ReadStartDate != '') {

    }
    else {
        alert("Read StartDate is Required Field");
        success = false;
    }
    if (CTFACT != '') {

    }
    else
    { alert("CT Factor is Required Field");
    success = false;
}

return success;

    }

onclientclick

<asp:Button ID="btn_Update" Style="background-color: #B2DE94; width: 40px"  CausesValidation="false" runat="server"  OnClientClick="return fnCheck(this);" Text="Update" CommandName="Update" />

Collectives™ on Stack Overflow

Validating multiple text boxes in single JavaScript Function

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related