Please how can I disable the required field validator is the check box is check.
Below is the code to the text box and required field validator.
<asp:CheckBoxList ID="business_owner_CheckBox" runat="server">
<asp:ListItem Value="1" Selected="false">I am a business owner</asp:ListItem>
</asp:CheckBoxList>
<asp:TextBox ID="business_name_Textbox" runat="server" CssClass="login-form-control col-xs-12 col-sm-12 col-md-12"
placeholder="Business Name"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="business_name_Textbox"
ValidationGroup="CreateUserWizard1"></asp:RequiredFieldValidator>
Related
I have a page with textboxes where a user enters their name and address. I also have ASP.NET requiredfieldvalidators associated with each of the input textboxes to verify that they enter in their info. Everything works for validating the fields from C# server-side, however, I need to validate them from client-side as well. I have an OnClientClick and OnClick events tied to a button.
When the OnClientClick function is called, I want to verify that the requiredfieldvalidators are valid (i.e. user entered info into input boxes) and if so, then I am wanting to start a JS timer that will do something after a certain period of time elapses. In the meantime, the Onclick server-side event fires and executes code to insert input into database. The server-side code is executing correctly in that my if (Page.IsValid) is correct.
If student did not enter info into all required fields, then it is false and does not execute the rest of the code. If student did enter all info, then inserts into DB. However, in the client-side code, when I execute if (Page_ClientValidate()) it ALWAYS returns true even if no fields have been filled out.
What am I missing? I want to say if "validation is successful (i.e. all fields have been entered) then start timer, otherwise do not start timer". Below is short snippet of my code. So when client-side function "Test()" is called, it is always saying 'true' even when inputs are empty, but the server-side function shows Page.IsValid is false, stops and shows the validator messages (which are defined in server-side function during Page_Load()). Why does client-side always give me true but server-side is false?
Client:
<%# Page Language="c#" CodeBehind="test1.aspx.cs" AutoEventWireup="false" Inherits="test1" %>
<!DOCTYPE html>
<html>
<head>
<title>xyz</title>
</head>
<body>
<form id="Form1" method="post" runat="server">
<div id="webPage">
<h3 class="section-title" align="left">User Information</h3>
<div class="grid-row no-padding">
<div class="grid-col-xs-12">
<div class="grid-row no-padding">
<div class="grid-col-xs-12">
<div class="form-field" style="padding-bottom: 0px; margin-bottom: 0px;">
<p><span style="color: blue;">Name on Card</span></p>
</div>
</div>
</div>
<div class="grid-row no-padding">
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">First Name:</label>
<asp:TextBox ID="tbBillFirstName" runat="server" CssClass="input-textbox editable" BackColor="#fff2e6"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvFirstName" ControlToValidate="tbBillFirstName" Display="Dynamic" runat="server"
Font-Names="Arial" Font-Size="10" Font-Bold="False" ForeColor="#ff8c19"></asp:RequiredFieldValidator>
</div>
</div>
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">Last Name:</label>
<asp:TextBox ID="tbBillLastName" runat="server" CssClass="input-textbox editable" BackColor="#fff2e6"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvLastName" ControlToValidate="tbBillLastName" Display="Dynamic" runat="server"
Font-Names="Arial" Font-Size="10" Font-Bold="False" ForeColor="#ff8c19"></asp:RequiredFieldValidator>
</div>
</div>
</div>
<div class="grid-row no-padding">
<div class="grid-col-xs-12">
<div class="form-field" style="padding-bottom: 0px; margin-bottom: 0px;">
<p><span style="color: blue;">Billing Address</span></p>
</div>
</div>
</div>
<div class="grid-row no-padding">
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">Street1:</label>
<asp:TextBox ID="tbBillAddress1" runat="server" CssClass="input-textbox editable" BackColor="#fff2e6"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvAddress1" ControlToValidate="tbBillAddress1" Display="Dynamic"
Font-Names="Arial" Font-Size="10" Font-Bold="False" ForeColor="#ff8c19" runat="server"></asp:RequiredFieldValidator>
</div>
</div>
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">Street2:</label>
<asp:TextBox ID="tbBillAddress2" runat="server" CssClass="input-textbox editable" BackColor="#fff2e6"></asp:TextBox>
</div>
</div>
</div>
<div class="grid-row no-padding">
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">City:</label>
<asp:TextBox ID="tbBillCity" runat="server" CssClass="input-textbox editable" BackColor="#fff2e6"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvBillCity" ControlToValidate="tbBillCity" Display="Dynamic" runat="server" Font-Names="Arial" Font-Size="10" Font-Bold="False" ForeColor="#ff8c19"></asp:RequiredFieldValidator>
</div>
</div>
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">State:</label>
<asp:DropDownList ID="StatesDDL" runat="server" DataTextField="State_name" DataValueField="State_code" CssClass="input-textbox editable" AutoPostBack="False" BackColor="#fff2e6"></asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvBillState" ControlToValidate="StatesDDL" Display="Dynamic" InitialValue="Select" runat="server" Font-Name="Arial" Font-Size="10" Font-Bold="False" ForeColor="#ff8c19"></asp:RequiredFieldValidator>
</div>
</div>
</div>
<div class="grid-row no-padding">
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">Zip:</label>
<asp:TextBox ID="tbBillZip" runat="server" CssClass="input-textbox editable" BackColor="#fff2e6"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvBillZip" ControlToValidate="tbBillZip" Display="Static"
runat="server" Font-Names="Arial" Font-Size="10" Font-Bold="False" ForeColor="#ff8c19"></asp:RequiredFieldValidator>
<asp:CustomValidator ID="cvZip" Font-Names="Arial" Font-Size="10" Font-Bold="False"
ForeColor="#ff8c19" runat="server" Display="Dynamic" ControlToValidate="tbBillZip"
OnServerValidate="CheckZipFormat"></asp:CustomValidator>
</div>
</div>
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">Country:</label>
<asp:DropDownList ID="ddlCountry" runat="server" DataTextField="Country_name" DataValueField="Country_code"
OnSelectedIndexChanged="CountryChanged" AutoPostBack="True"
CssClass="input-textbox editable" BackColor="#fff2e6">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvCountry" runat="server" ControlToValidate="ddlCountry"
Display="Dynamic" Font-Names="Arial" Font-Size="10" Font-Bold="False"
ForeColor="#ff8c19" InitialValue="00"></asp:RequiredFieldValidator>
</div>
</div>
</div>
</div>
</div>
<div id="divSubmit" class="grid-row bottom-nav">
<div class="grid-col-xs-12" style="text-align:center;">
<asp:LinkButton ID="btn_submit2" runat="server" OnClientClick="Test();" OnClick="btn_submit_Click" CssClass="button button-orange" CausesValidation="true">Submit</asp:LinkButton>
</div>
</div>
</div>
<script type="text/javascript">
function Test() {
if (Page_ClientValidate()) {
alert('valid');
}
else {
alert('not valid');
}
}
</script>
</form>
</body>
</html>
Server-side:
public void btn_submit_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
// insert into DB
}
}
I have one asp dropdownlist. And I want to select value by came from client side. I can got data from client side but i can not set it my asp dropdownlist by js
HTML
<div class="col-md-6 form-group">
<asp:Label ID="ATRRegionCountryLabel" AssociatedControlID="ATRRegionCountryDropDownList" CssClass="col-sm-4 control-label" runat="server" Text="Country" />
<p class="col-sm-8">
<asp:DropDownList ID="ATRRegionCountryDropDownList" CssClass="form-control select" data-live-search="true" data-callback="hotels.aspx?cmd=city" data-related="select-location" runat="server" ClientIDMode="Static">
<asp:ListItem Value="0" Text="Please Select" />
</asp:DropDownList>
</p>
</div>
JS
$(document).on('click', '#btn-region-edit', function (e) {
e.preventDefault();
var $this = $(this),
id = $this.data('id'),
name = $this.data('name'),
country = $this.data('country');
$("#<%=ATRRegionCountryDropDownList.ClientID%>").val('210');
alert(country);
});
I solve it like below codes
HTML
<div class="col-md-6 form-group">
<asp:Label ID="ATRRegionCountryLabel"
AssociatedControlID="ATRRegionCountryDropDownList" CssClass="col-sm-4 control-label"
runat="server" Text="Country" />
<p class="col-sm-8">
<asp:DropDownList ID="ATRRegionCountryDropDownList" CssClass="form-control select"
data-live-search="true" data-callback="hotels.aspx?cmd=city" data-related="select-
location" runat="server" ClientIDMode="Static">
<asp:ListItem Value="0" Text="Please Select" />
</asp:DropDownList>
</p>
</div>
JS
$(document).on('click', '#btn-region-edit', function (e) {
e.preventDefault();
var $this = $(this),
id = $this.data('id'),
name = $this.data('name'),
country = $this.data('country');
$('#<%=ATRRegionCountryDropDownList.ClientID %>').val(country).change();
});
I want to set the start and end date of an ajax calendar extender control.
I want to make it so that my calendar starts from todays date.
<div class="col-md-2 col-sm-2 col-xs-12">
<asp:Label ID="lblTravelStartDate" runat="server" Text="Travel Start Date" class="apply-page-label" ></asp:Label>
<div class="posRelative" id="Div3">
<asp:TextBox ID="txtTravelFromDate" runat="server" onpaste="return false;" placeHolder="Travel Start Date" class="form-control" onclick="removeerror(this.id)" autopostback="true" . OnTextChanged="txtTravelFromDate_TextChanged"></asp:TextBox>
<asp:ImageButton runat="server" ID="cmdTravelFromDate" ImageUrl="images/calander.png" Height="25px" Width="25px" Style="position: absolute; top: 3px; right: 5px;" OnClientClick="removeError('ContentPlaceHolder1_txtTravelFromDate')" />
<cc1:CalendarExtender ID="calTravelFromDate" runat="server" Enabled="True" Format="dd-MM-yyyy" TargetControlID="txtTravelFromDate" PopupButtonID="cmdTravelFromDate" CssClass="calender"> . </cc1:CalendarExtender>
</div>
The next time you should post your code if you don'w want to be down voted.
What you want is to set YourAjaxCalendarID.StartDate = DateTime.Now()from your codebehind Page_Load()
I am very new to C# asp.net. I am trying to make an online registration form. I am struggling with the below issue. Can someone help me out please?
There are 5 fields for this problem
1) Category : this is a radio button which has 2 options -> Student and Staff
2) Course : this is a Dropdown
3) Semester : this is a Dropdown
4) Department : this is a Free text field
5) Designation : this is a Free text field
If an end user selects Student radio button, then Course & semester fields should be visible and department & designation should NOT be visible
If an end user selects Staff radio button, then department & designation fields should be visible and Course & semester should NOT be visible
Can someone please help me accomplish this.
Here is the code.
<div class="col-lg-10">
<div class="radio">
<label>
<asp:RadioButtonList ID="category" runat="server">
<asp:ListItem Text="Student" Value="student"></asp:ListItem>
<asp:ListItem Text="Staff" Value="staff"></asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator21" runat="server" ControlToValidate="category" ErrorMessage="Category is Requried" Style="color: #58CB00"></asp:RequiredFieldValidator>
</label>
</div>
</div>
</div>
<div class="Department">
<asp:Label ID="Label3" runat="server" Text="Department*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label><br />
<div class="col-lg-10">
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control ddl">
<asp:ListItem>Select your department</asp:ListItem>
<asp:ListItem>Administration</asp:ListItem>
<asp:ListItem>IT Solutions</asp:ListItem>
<asp:ListItem>B.Tech(CSE)</asp:ListItem>
<asp:ListItem>MCA</asp:ListItem>
<asp:ListItem>iMBA</asp:ListItem>
<asp:ListItem>English</asp:ListItem>
<asp:ListItem>Library</asp:ListItem>
<asp:ListItem>Others</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<br />
<div class="Designation">
<asp:Label ID="Label4" runat="server" Text="Designation*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
<div class="col-lg-10">
<asp:TextBox ID="TextBox2" runat="server" CssClass="form-control"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox2" ErrorMessage="Designation is Requried" Style="color: #58CB00"> </asp:RequiredFieldValidator>
</div>
</div>
<div class="Course">
<asp:Label ID="Label5" runat="server" Text="Course*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
<div class="col-lg-10">
<asp:DropDownList ID="DropDownList2" runat="server" CssClass="form-control ddl">
<asp:ListItem>B.Tech(CSE)</asp:ListItem>
<asp:ListItem>MCA</asp:ListItem>
<asp:ListItem>iMBA</asp:ListItem>
<asp:ListItem>English</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<br />
<div class="Semester">
<asp:Label ID="Label6" runat="server" Text="Semester*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
<div class="col-lg-10">
<asp:DropDownList ID="DropDownList3" runat="server" CssClass="form-control ddl">
<asp:ListItem>I</asp:ListItem>
<asp:ListItem>II</asp:ListItem>
<asp:ListItem>III</asp:ListItem>
<asp:ListItem>IV</asp:ListItem>
<asp:ListItem>V</asp:ListItem>
<asp:ListItem>VI</asp:ListItem>
<asp:ListItem>VII</asp:ListItem>
<asp:ListItem>VIII</asp:ListItem>
<asp:ListItem>IX</asp:ListItem>
<asp:ListItem>X</asp:ListItem>
</asp:DropDownList>
</div>
</div>
You can easily do it with jQuery like this:-
$(document).ready(function () {
$('input[name="category"]').change(function () {
if ($.trim($(this).val()) == "student") {
$('.Department,.Designation').hide();
$('.Designation,.Course').show();
}
else {
$('.Department,.Designation').show();
$('.Designation,.Course').hide();
}
});
});
You need to import the jQuery library.
Using category_SelectedIndexChanged we can able to achieve it
.Aspx Code
<div class="col-lg-10">
<div class="radio">
<label>
<asp:RadioButtonList ID="category" runat="server" AutoPostBack="true" OnSelectedIndexChanged="category_SelectedIndexChanged">
<asp:ListItem Text="Student" Value="student"></asp:ListItem>
<asp:ListItem Text="Staff" Value="staff"></asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator21" runat="server" ControlToValidate="category" ErrorMessage="Category is Requried" Style="color: #58CB00"></asp:RequiredFieldValidator>
</label>
</div>
</div>
<div class="Department" id="department" runat="server" >
<asp:Label ID="Label3" runat="server" Text="Department*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label><br />
<div class="col-lg-10">
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control ddl">
<asp:ListItem>Select your department</asp:ListItem>
<asp:ListItem>Administration</asp:ListItem>
<asp:ListItem>IT Solutions</asp:ListItem>
<asp:ListItem>B.Tech(CSE)</asp:ListItem>
<asp:ListItem>MCA</asp:ListItem>
<asp:ListItem>iMBA</asp:ListItem>
<asp:ListItem>English</asp:ListItem>
<asp:ListItem>Library</asp:ListItem>
<asp:ListItem>Others</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<br />
<div class="Designation" id="desig" runat="server">
<asp:Label ID="Label4" runat="server" Text="Designation*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
<div class="col-lg-10">
<asp:TextBox ID="TextBox2" runat="server" CssClass="form-control"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox2" ErrorMessage="Designation is Requried" Style="color: #58CB00"> </asp:RequiredFieldValidator>
</div>
</div>
<div class="Course" id="cour" runat="server">
<asp:Label ID="Label5" runat="server" Text="Course*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
<div class="col-lg-10">
<asp:DropDownList ID="DropDownList2" runat="server" CssClass="form-control ddl">
<asp:ListItem>B.Tech(CSE)</asp:ListItem>
<asp:ListItem>MCA</asp:ListItem>
<asp:ListItem>iMBA</asp:ListItem>
<asp:ListItem>English</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<br />
<div class="Semester" id="sem" runat="server">
<asp:Label ID="Label6" runat="server" Text="Semester*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
<div class="col-lg-10">
<asp:DropDownList ID="DropDownList3" runat="server" CssClass="form-control ddl">
<asp:ListItem>I</asp:ListItem>
<asp:ListItem>II</asp:ListItem>
<asp:ListItem>III</asp:ListItem>
<asp:ListItem>IV</asp:ListItem>
<asp:ListItem>V</asp:ListItem>
<asp:ListItem>VI</asp:ListItem>
<asp:ListItem>VII</asp:ListItem>
<asp:ListItem>VIII</asp:ListItem>
<asp:ListItem>IX</asp:ListItem>
<asp:ListItem>X</asp:ListItem>
</asp:DropDownList>
</div>
</div>
.CS code
protected void category_SelectedIndexChanged(object sender, EventArgs e)
{
if(category.SelectedValue =="student")
{
cour.Visible = true;
sem.Visible = true;
department.Visible = false;
desig.Visible = false;
}
else
{
cour.Visible = false;
sem.Visible = false;
department.Visible = true;
desig.Visible = true;
}
}
I have this code below. I am attempting to on the checkbox click the 2 expanded divs would be shown/hidden. For some reason the functions are being hit but they are not hiding/showing hte divs. I put the exact code in jfiddle and it worked correctly. Any input would be great thanks.
HERE IS JFIDDLE THAT WORKS CORRECTLY http://jsfiddle.net/svmY3/3/
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="HorizontalSinglePageOptinSqueezePage2.ascx.cs" Inherits="UmbracoUsercontrols.HorizontalSinglePageOptinSqueezePage2" %>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
alert('test234123123');
$("#assist").change(function () {
$("#expanded, #expanded2").toggle();
alert('test2343');
});
});
function showhide() {
alert('test');
$("#expanded, #expanded2").toggle();
}
</script>
<!-- BASIC FORM -->
<div class="col-md-4">
<form role="form">
<div class="form-group">
<Asp:TextBox runat="server" class="form-control" type="text" id="name" placeholder="NAME"/>
</div>
<div class="form-group">
<Asp:TextBox runat="server" class="form-control" type="email" id="email" placeholder="EMAIL"/>
</div>
<div class="assistance">I would like immediate assistance: <input type="checkbox" runat="server" id="assist" onclick="showhide();" /></div>
<!-- EXPANDED FORM SECTION 1 -->
<div style="display:none" runat="server" class="expanded" id="expanded">
<div class="form-group">
<asp:textbox runat="server" type="tel" class="form-control" id="phone" placeholder="PHONE"/>
</div>
<p class="center">Please tell us about your situation and we'll see if we can help. We will also email you the <em>The 5 Easiest Ways to STOP Foreclosure in Under 48 Hours or Less</em>.</p>
</div>
<!-- END EXPANDED FORM SECTION 1 -->
</form></div>
<div class="col-md-5">
<!-- EXPANDED FORM SECTION 2 -->
<div runat="server" style="display:none" class="expanded" id="expanded2">
<div class="form-group">
<asp:label runat="server">Are you most interested in:</asp:label>
<asp:dropdownlist runat="server" id="interest" class="pull-right">
<asp:listitem value="Selling" Text="Selling"></asp:listitem>
<asp:listitem value="Refinancing" Text="Refinancing">
</asp:listitem>
<asp:listitem value="Keeping" Text="Keeping"></asp:listitem>
</asp:dropdownlist>
</div>
<div class="form-group">
<Asp:Label runat="server" >Are you in foreclosure:</Asp:Label>
<asp:DropDownList runat="server" ID="foreclosure" OnChange="javascript:toggle();">
<asp:ListItem Value="Yes" Text="Yes" />
<asp:ListItem Selected="True" Value="No" Text="No" />
</asp:DropDownList>
</div>
<div class="form-group">
<asp:label runat="server">Your best guess, how much do you owe on:</asp:label><br />
<asp:label runat="server" >1st Mortgage:</asp:label>
<asp:textbox runat="server" type="text" class="form-control" placeholder="Amount"/>
</div>
<div class="form-group">
<label>2nd Mortgage:</label>
<asp:textbox runat="server" type="text" class="form-control" placeholder="Amount"/>
</div>
<div class="form-group">
<asp:label runat="server" >Have you filed bankruptcy:</asp:label>
<asp:dropdownlist runat="server" ID="bankruptcy" class="pull-right">
<asp:listitem value="No" Text="No"></asp:listitem>
<asp:listitem value="Yes" Text="Yes"></asp:listitem>
</asp:dropdownlist>
</div>
<div class="form-group">
<asp:label runat="server" >Please describe your situation (briefly):</asp:label><br />
<asp:textbox runat="server" ID="situation" class="form-control"></asp:textbox>
</div>
</div>
<!-- END EXPANDED FORM SECTION -->
<asp:button runat="server" id="button" name="button" type="submit" text="Get Your E-Book Now" class="btn btn-primary btn-lg trackMe" data-trackerid="optin" OnClick="submitButton_Click"></asp:button>
<div class="center privacy">
<small>100% Privacy Guaranteed</small>
</div>
</div>
When an ASP control has runat="server", it generates a new id for the element so that it can bind its own JS handler to that new generated id. I bet if you inspect that element on the browser, its id won't be assist. Remove runat="server" if you aren't actually doing a server callback.
Put showhide() inside the $(document).ready function. Otherwise you're assigning the toggle-effect before the according input element is even loaded.
$(document).ready(function () {
$("#assist").change(function () {
$("#expanded, #expanded2").toggle();
});
function showhide() {
$("#expanded, #expanded2").toggle();
}
});