Client side custom validation with radiobuttons - javascript

Can I have an example code for this? Two radio buttons in a group name "Gender". If the user selects nothing, a message should appear saying "select one". I've done some custom validations with textboxes and dropdownlists and I became stuck with radiobuttons.

$("form").submit(function(e){
e.preventDefault();
if($(this).find("input[name=Gender]:checked").length === 0){
alert('Gender not selected.');
}
});
you can also use val() of selected radio group to check if it's undefined or a value.
jsfiddle: http://jsfiddle.net/jh8p3/
client side validation in asp.net
<asp:RadioButtonList ID="Gender" runat="server">
<asp:ListItem Text="Male" Value="Male" />
<asp:ListItem Text="Female" Value="Female" />
</asp:RadioButtonList>
<asp:Button ID="Button1"
Text="Validate"
runat="server" OnClientClick="return validate();" />
<script>
function validate() {
if (checkGender()) {
return true;
}
return false;
}
function checkGender() {
var selectedGenderRB = document.querySelector('#<%=Gender.ClientID%> input:checked');
if (selectedGenderRB) {
return true;
} else {
alert('gender not selected.');
return false;
}
}
</script>

how about a lil' fiddle
http://jsfiddle.net/bTf2R/
$('input[type=radio]').change(function(){
$('p').text('Thanks');
});

Related

ASP.net, How can I see the selected value of a radio button in javascript

I thought myRadioButton.value would work but value doesn't come up as an option I can select. If I select nodevalue the value of that during runtime is null. "No" should be selected by default but I'm not sure how to bring up that value in my javascript code. What am I missing?
<script type="text/javascript">
function TextValidation(oSrouce, args) {
var myRadioButton = document.getElementById('<%= rblUserEquip.ClientID %>');
var myTextBox = document.getElementById('<%= txtEmpName.ClientID %>');
alert("Test" + myRadioButton.value);
if (myRadioButton.value == "no")
{
alert("Test2");
if (myTextBox.value == "")
{
args.IsValid = False;
alert("Employee name empty");
return false;
}
else
args.IsValid = True;
}
else
{
args.IsValid = True;
alert("Test3");
}
}
</script>
<asp:RadioButtonList ID="rblUserEquip" runat="server">
<asp:ListItem Value="yes" Text="Yes"></asp:ListItem>
<asp:ListItem Value="no" Text="No" Selected="True"></asp:ListItem>
</asp:RadioButtonList>
<asp:TextBox ID="txtEmpName" runat="server" ></asp:TextBox>
<asp:CustomValidator runat="server" ID="cvEmpName" ClientValidationFunction="TextValidation" Display="Dynamic" text="*" ErrorMessage="Please fill TextBox" ></asp:CustomValidator>
<cc1:ValidatorCalloutExtender ID="vceSymptoms" runat="server" TargetControlID="cvEmpName"></cc1:ValidatorCalloutExtender>
It works like this:
<asp:RadioButtonList ID="rblUserEquip" runat="server" ClientIDMode="Static">
<asp:ListItem Value="1" Text="Yes"></asp:ListItem>
<asp:ListItem Value="2" Text="No" Selected="True"></asp:ListItem>
</asp:RadioButtonList>
<br />
<asp:Button ID="Button2" runat="server" Text="Client side = get RB value"
OnClientClick="MyRB();return false;"/>
<br />
<script>
function MyRB() {
// get radio button choice
rbl = $('#rblUserEquip')
choices = rbl.find('input')
choicesText = rbl.find('label')
console.log(choices[0].checked)
console.log("choice value = " + choices[0].value)
console.log("choice Text = " + choicesText[0].innerText)
// get selected rb only
mysel = rbl.find('input:checked')
console.log("choice value for sel = " + mysel[0].value)
}
</script>
Note how you can't get the "text" value, since it is rendered as a separate label. I assumed jQuery for above - but above should suffice for what you require.
And for avoiding confusing, I changed the above "yes" (value) to 1, and 2. Since we REALLY want to be crystal clear that we can get the "value" of the input, but the actual text is generated and displayed as a 100% separate label.
so, running above js code, then we get/see this:
output:
false
choice value = 1
choice Text = Yes
(above is first value in array of choices)
last set of code, we select based on checked
Ouput:
choice value for sel = 2

validate user control input value

How to validate user control textbox value on Parent page? I have the following code but it couldn't find the control. I have checked IE View Source(HTML) and this control renders as
ctl00_Management_Initiation_txtTitle_txtInput
How to get the value using JQuery? Please let me know.
User Control
<telerik:RadTextBox id="txtInput" runat="server" TextMode="MultiLine" LabelCssClass=""></telerik:RadTextBox>
<asp:image id="ImgRequired1" ImageUrl="../../images/requiredfield.gif" AlternateText="Required Field" Runat="server" Visible=false></asp:image><br />
.aspx page
<script type="text/javascript">
$(document).ready(function () {
$("#<%=btnSave.ClientID %>").click(function () {
var valid = true;
var msg = "Please fill form:\n";
if($("input[id*=txtTitle]").val().length == 0{
msg += "Title is Required!\n";
valid = false;
}
});
});
</script>
<uc1:ControlTextBox ID="txtTitle" runat="server" MaxLength="200" ></uc1:ControlTextBox>
<asp:Button ID="btnSave" name="btnSave" runat="server" Text="Save" />
if($("#<%= txtTitle.TextInputClientID %>").val().length == 0) {
There is serious lack of closing brackets, both "}" and ")" in your javascript.
Add property to your user control:
public string TextInputClientID { get { return txtInput.ClientID; } }

validation of radiobuttonlist in asp.net using javascript

i have to validate a radio button using javascript. it should show a message if none of the option is selected.
my radio button code is:
<asp:RadioButtonList ID="welldata" runat="server" RepeatDirection="Horizontal" Width="100px">
<asp:ListItem></asp:ListItem>
<asp:ListItem></asp:ListItem>
</asp:RadioButtonList>
and the submit button is:
<asp:Button ID="next2" runat="server" Text=">>" Width="46px"
OnClientClick="return next2()"/>
the corresponding javascript function is :
function next2() {
var listItemArray = document.getElementById('<%=welldata.ClientID %>');
var isItemChecked = false;
var length1 = listItemArray.length;
for (var i=0; i<length1; i++)
{
var listItem = listItemArray[i];
document.write(listItem);
if ( listItem.checked )
{
alert(listItem.value);
isItemChecked = true;
}
}
if ( isItemChecked == false )
{
alert('Nothing is checked for welldata!');
return false;
}
return true;
}
while debugging i noticed thaat function is executed but doesn't enter the for loop.
also i tried
document.write(isItemChecked);
document.write(listItemArray);
document.write(length1);
and the output was :
false [object HTMLTableElement] undefined
The wellData RadioButtonList ASP.NET server control will render in the browser as a table with a number of input type="radio" controls under it, each with the same name.
So, you need to get the input tags inside the table tag first:
var wellData = document.getElementById('<%=welldata.ClientID %>');
var listItemArray = wellData.getElementsByTagName('input');
This is, of course, if you are doing this manually for some odd reason. You can do it automatically with a RequiredFieldValidator control.
<asp:RadioButtonList ID="welldata" runat="server" RepeatDirection="Horizontal" Width="100px">
<asp:ListItem></asp:ListItem>
<asp:ListItem></asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="rfvWellData" runat="server" ControlToValidate="wellData" Display="Dynamic" ErrorMessage="Pick yourself some well data" />
You are using a RadiobuttonList which is rendered as table per default. If you select the dom element by id document.getElementById('<%=welldata.ClientID %>') then you are selecting the table and not the RadioButtonList. If you want to select the radio buttons then you have to loop through the childNodes of listItemArray to get the radio buttons. Alternatively you could use jquery to select the radio buttons, as their ids will start with the id of your radio button list (they will look like welldata_0 or welldata_1).
This line of jquery code will get the your radio buttons
var listItemArray = $("input[id^='welldata']")
Try this:
function next2() {
if(document.getElementById('<%=welldata.ClientID %>').checked==false)
{
alert('Nothing is checked for welldata!');
return false;
}
return true;
}
or
Use RequiredFieldValidator
<asp:RequiredFieldValidator
ID="ReqiredFieldValidator1"
runat="server"
ControlToValidate="welldata"
ErrorMessage="Select your welldata!"
>
Check these below links
http://asp-net-example.blogspot.in/2009/02/aspnet-requiredfieldvalidator-example.html
http://www.itechies.net/tutorials/jscript/jsexample.php-pid-jform.htm#rb
http://www.codeproject.com/Questions/499602/RequiredplusFieldplusValidatorplusForplusRadioplus
var rblItems = document.getElementById('<%=radioBtnListId.ClientID %>').getElementsByTagName('input');
var checkedItems = true;
for (var i = 0; i < rblItems.length; i++) {
if (rblItems[i].checked) {
checkedItems = true;
break;
}
else {
checkedItems = false;
}
}
if (!checkedItems) {//Hence No items checked
alert("Nothing is checked");
return false;
}

Required Field Validation in javascript

I tried this code for validating empty field,But it doesn't works properly when call javascript it does not focus on Textbox,and code will execute continues.
Html Code:
<asp:TextBox ID="txtholdername" runat="server" Width="60%"></asp:TextBox>
<asp:TextBox ID="txtusername" runat="server" Width="60%"></asp:TextBox>
<asp:ImageButton ID="btnsave" runat="server" OnClientClick="javascript:return validateRegistrationMaster();" ImageUrl="~/Images/save.png" />
Script
function IsBlank(obj) {
if (obj) {
if (!String.prototype.trim) { String.prototype.trim = function () { return this.replace(/^\s+|\s+$/g, ''); }; }
if ((obj.value.trim().length == 0) || (obj.value == null)) {
obj.focus();
return false;
}
return true;
}
}
function validateRegistrationMaster() {
var Holder_Name = document.getElementById('<%= txtholdername.ClientID %>');
var username = document.getElementById('<%= txtusername.ClientID %>');
if ((!IsBlank(Holder_Name))) {
Holder_Name.focus();
return false;
}
if ((!IsBlank(username))) {
username.focus();
return false;
} return true;
}
Use Required Field Validator instead of custom Javascript, while using Asp.Net Controls.
Example : Click Here W3 Schools Link
Code:
<asp:RequiredFieldValidator ControlToValidate="txtholdername" Text="The holder name field is required!"
runat="server" />
<asp:RequiredFieldValidator ControlToValidate="txtusername" Text="The user namefield is required!"
runat="server" />

ValidationGroup in ASP.NET

I have this much
<asp:Button ID="btnSaveContest" runat="server" Text="Save & Publish Contest" OnClientClick="javascript:changeInputTexts(); return disableAfterClick();"
ValidationGroup="ContestAdd" OnClick="btnSaveContest_Click" />
Now I want to call disableAfterClick() after all validations are completed. It should be in Client Side. So that I can ensure that the user can click the button only one time.
function ValidateCreateContest() {
Page_ClientValidate();
if (Page_IsValid) {
$('#<%=btnSaveContest.ClientID%>').attr('disabled', 'disabled');
return true;
}
else {
return false;
}
}`

Categories