Jquery validation not working with my ASP.NET master page

Question

0.00/5 (No votes)

See more:

I'm trying to use jQuery validation on my asp.net page that uses a master page. Whenever I use this code without the master page it works fine. But with the master page it doesn't work. The only thing different between the 2 is that without the master page the Group Name stays the same when web page is rendered. name="Game_1" with the master page it changes to name="ctl00$ContentPlaceHolder1$Game_1"

I tried to use both of those names above in my jQuery but it still doesn't work. I also tried 2 different jQuery codes as well but neither of them work.

Also, my Radio Buttons are inside a Repeater. On my site I have 17 pairs of radio button but didn't think it was necessary to put all that code here.

Any help would be appreciated. Thanks

What I have tried:

<asp:RadioButton ID="radBears" runat="server" Text="Bears" GroupName="Game_1" CssClass="rnd" />

<asp:RadioButton ID="radRaiders" runat="server" Text="Raiders" GroupName="Game_1" CssClass="rnd" />

<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Selection is required" ClientValidationFunction = "ValidateRadioButton1" />

<asp:RadioButton ID="radChargers" runat="server" Text="Chargers" GroupName="Game_2" CssClass="rnd" />
<asp:RadioButton ID="radCowboys" runat="server" Text="Cowboys" GroupName="Game_2" CssClass="rnd" />

<asp:CustomValidator ID="CustomValidator2" runat="server" ErrorMessage="Selection is required" ClientValidationFunction = "ValidateRadioButton2" />

<asp:Button ID="Button1" runat="server" Text="Submit" />

<script src="Scripts/jquery-3.3.1.min.js">

function ValidateRadioButton1(sender, args) {
args.IsValid = $("[name=Game_1]:checked").length > 0;
}

function ValidateRadioButton2(sender, args) {
args.IsValid = $("[name=Game_2]:checked").length > 0;
}

I also tried this:

function ValidateRadioButton(sender, args) {
var repeater = document.getElementById("<%= myRepeater.ClientID %>");
var items = repeater.getElementsByTagName('input');
for (var i = 0; i < items.length; i++) {
if (items[i].type == "radio") {
if (items[i].checked) {
args.IsValid = true;
return;
}
else {
args.IsValid = false;
}
}
}
}

Posted 5-Apr-19 4:54am

Commish13

Updated 5-Apr-19 5:52am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2019-04-05T05:53:00

Solution 1

You can use jQuery's $= to find elements where the attribute ends with the specified string:

function ValidateRadioButton1(sender, args) {
    args.IsValid = $("input[name$='Game_1']:checked").length > 0;
}

Attribute Ends With Selector [name$=”value”] | jQuery API Documentation[^]

NB: If you're using a data-bound control, things will be more complicated. You will probably need a wrapper element which contains the radio button pairs and the custom validator:

<ItemTemplate>
    <div class="rb-wrapper">
        <asp:RadioButton ID="radBears" runat="server" Text="Bears" GroupName="Game_1" CssClass="rnd" />
        <asp:RadioButton ID="radRaiders" runat="server" Text="Raiders" GroupName="Game_1" CssClass="rnd" />
        <asp:CustomValidator runat="server" ErrorMessage="Selection is required" ClientValidationFunction="ValidateRadioButtonList" />
    </div>
</ItemTemplate>

You would then need to find the closest container to the validator, and look for a checked item within that container:

JavaScript

function ValidateRadioButtonList(sender, args) {
    args.IsValid = $(sender).closest(".rb-wrapper").find("input:radio:checked").length > 0;
}

Posted 5-Apr-19 5:53am

Richard Deeming

Comments

Commish13 5-Apr-19 13:03pm

Thank you. I got the solution with the container to work. If you don't mind, could you show me how to do this with a loop? Like I said I have 17 sets of radio buttons.

Richard Deeming 5-Apr-19 13:10pm

Something like this should work:

function ValidateRadioButton(sender, args) {
    args.IsValid = true;
    
    $(".rb-wrapper").each(function(){
        if ($(this).find("input:radio:checked").length === 0) {
            args.IsValid = false;
            return false;
        }
    });
}

Commish13 5-Apr-19 14:29pm

With this loop my Error message displays with or without the radio button checked

Richard Deeming 5-Apr-19 14:33pm

The error message should only appear if one of the wrapper elements doesn't contain a checked radiobutton. If you select an option in every item, the validation should pass.

Commish13 5-Apr-19 14:52pm

If getting an error message in every situation. 1 or both radio buttons checked and when 1 or both are not checked

Richard Deeming 5-Apr-19 14:57pm

As I said, the validator will only display an error if there is at least one rb-wrapper element which does not contain a checked radiobutton.

Either debug the Javascript code, or add some console.debug calls into the function and look at the output in the developer console:

function ValidateRadioButton(sender, args) {
    args.IsValid = true;
    
    $(".rb-wrapper").each(function(){
        if ($(this).find("input:radio:checked").length === 0) {
            console.debug("ValidateRadioButton", "No option selected here -->", this, $(this).find("input:radio"));
            args.IsValid = false;
            return false;
        }
    });
    
    console.debug("ValidateRadioButton", args.IsValid);
}

Commish13 5-Apr-19 17:23pm

Thanks for your help, I got it to work because of your help