RadioButtons causing built-in .net form validation to malfunction - asp.net

I have a very basic form in a .Net page, it has 6 fields each with a requiredfieldvalidator attached. Everything works fine and the form is stopped if even one field is blank. I was asked to add a section with 2 radio buttons (I set one option as checked to avoid any validation on the field), now the form submits no matter if the fields have information in them or not.
Subset of default.aspx
<form id="form1" runat="server">
<div style="margin-bottom:10px;">
<label for="txtAgencyName">Name of Agency</label>
<asp:TextBox ID="txtAgencyName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvAgencyName" runat="server" ErrorMessage="*Required" ControlToValidate="txtAgencyName" ValidationGroup="vg1" CssClass="rfvErrors"></asp:RequiredFieldValidator>
</div>
<div style="margin-bottom:10px;">
<label for="txtEmail">Email Address</label>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmail" runat="server" ErrorMessage="*Required" ControlToValidate="txtEmail" ValidationGroup="vg1" CssClass="rfvErrors"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revEmail" runat="server" ErrorMessage="Invalid Email Address" CssClass="revErrors" ValidationExpression="(^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*#([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$)" ValidationGroup="vg1" ControlToValidate="txtEmail"></asp:RegularExpressionValidator>
</div>
<!-- This is the section that is breaking the validation -->
<div style="margin-bottom:10px;">
<asp:RadioButton ID="rbOwnershipAgent" runat="server" Checked="true" GroupName="Ownership" />
<asp:RadioButton ID="rbOwnershipReferral" runat="server" GroupName="Ownership" />
</div>
<!-- --------------------------------------------------- -->
<div style="margin-bottom:10px;">
<label for="txtAgencyContact">Agency Contact Name</label>
<asp:TextBox ID="txtAgencyContact" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvAgencyContact" runat="server" ErrorMessage="*Required" ControlToValidate="txtAgencyContact" ValidationGroup="vg1" CssClass="rfvErrors"></asp:RequiredFieldValidator>
</div>
<div style="margin-bottom:10px;">
<label for="txtPhone">Telephone Number</label>
<asp:TextBox ID="txtPhone" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvTelephone" runat="server" ErrorMessage="*Required" ControlToValidate="txtPhone" ValidationGroup="vg1" CssClass="rfvErrors"></asp:RequiredFieldValidator>
</div>
<div>
<label for="ddlState">State</label>
<asp:DropDownList ID="ddlState" runat="server" AppendDataBoundItems="True">
<asp:ListItem Text="Select State" Value=""></asp:ListItem>
</asp:DropDownList>
</div>
<div style="margin-bottom:10px;">
<label for="taCarriers">In your agency, who are the carriers writing liquor liability for you today?</label>
<asp:TextBox ID="taCarriers" runat="server" TextMode="MultiLine" Rows="3"></asp:TextBox><asp:RequiredFieldValidator ID="rfvOtherCarriers" runat="server" ErrorMessage="*Required" ControlToValidate="taCarriers" ValidationGroup="vg1" CssClass="rfvErrors" style="margin-top:15px;"></asp:RequiredFieldValidator>
</div>
<div style="width:100%;margin-top:20px;border-bottom:1px solid #27a0d6"></div>
<asp:Button ID="btnSubmit" runat="server" Text="Submit »" name="bnSubmit" class="submit" ValidationGroup="vg1" />
</form>
Am I missing something simple as far as an attribute on the submit button or radio buttons? I'm just surprised that a built in .Net control is causing this kind of trouble for something this basic. Thanks for any help.

Related

List items disappear after postback

I am having lots of problems with my dropdownlist. My dropdownlist controls disappear after postback.
The idea is that if in the drop down list I choose Spain, the ddlProvincia control shows the Spanish provinces. However, if I choose any country other than Spain, I should show the textbox "tbProvinciaNombre".
The problem is that when I select a country in the "ddlPais" control the list items of this control and "ddlProvincia" disappear completely.
Any help is welcome.
Thank you.
<asp:UpdatePanel ID="upProvinciaNombre" runat="server" UpdateMode="Conditional" class="col-md-6 form-group">
<ContentTemplate>
<!-- Provincia -->
<div id="panelDdlProvincia" runat="server" visible="true">
<asp:Label runat="server" AssociatedControlID="ddlProvincia">Provincia</asp:Label><span class="requerido">*</span>
<asp:DropDownList ID="ddlProvincia" runat="server" CssClass="form-control selectpicker" />
<asp:RequiredFieldValidator ID="rfvddlProvincia" runat="server" ErrorMessage="Seleccione una opción" CssClass="invalid-feedback" Text="*" InitialValue="none" ControlToValidate="ddlProvincia" ValidationGroup="ValidationButton"></asp:RequiredFieldValidator>
<ajax:ValidatorCalloutExtender ID="vceRfvddlProvincia" runat="server" TargetControlID="rfvddlProvincia" HighlightCssClass="error" CssClass="oculto" />
</div>
<!-- Provincia Nombre -->
<div id="panelTbProvinciaNombre" runat="server" visible="false">
<asp:Label runat="server" ID="lbProvinciaNombre" AssociatedControlID="tbProvinciaNombre">Provincia</asp:Label><span class="requerido">*</span>
<asp:TextBox ID="tbProvinciaNombre" runat="server" CssClass="form-control"></asp:TextBox>
<div>
<asp:RequiredFieldValidator ID="rfvTbProvinciaNombre" runat="server" CssClass="invalid-feedback" ControlToValidate="tbProvinciaNombre" Display="Dynamic" ValidationGroup="ValidationButton" ErrorMessage="Introduzca una provincia válida" />
<ajax:ValidatorCalloutExtender ID="vceRfvTbProvinciaNombre" runat="server" TargetControlID="rfvTbProvinciaNombre" HighlightCssClass="error" CssClass="oculto" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<!-- Pais -->
<asp:UpdatePanel ID="upPais" runat="server" UpdateMode="Conditional" class="col-md-6 form-group">
<ContentTemplate>
<asp:Label runat="server" AssociatedControlID="ddlPais">Pais</asp:Label><span class="requerido">*</span>
<asp:DropDownList ID="ddlPais" runat="server" CssClass="form-control selectpicker" AutoPostBack="true" />
<asp:RequiredFieldValidator ID="rfvddlPais" runat="server" ErrorMessage="Seleccione una opción" CssClass="invalid-feedback" Text="*" InitialValue="none" ControlToValidate="ddlPais" ValidationGroup="ValidationButton"></asp:RequiredFieldValidator>
<ajax:ValidatorCalloutExtender ID="vceRfvddlPais" runat="server" TargetControlID="rfvddlPais" HighlightCssClass="error" CssClass="oculto" />
</ContentTemplate>
</asp:UpdatePanel>
<!-- Políticas -->
<div class="col-md-12 form-group">
<div class="checkbox">
<asp:CheckBox ID="cbPoliticas" runat="server" />
<asp:Label runat="server" ID="politicas" AssociatedControlID="cbPoliticas">He leído y acepto la
<asp:HyperLink ID="hlkPoliticaPrivacidad" runat="server" Target="_blank" NavigateUrl="~/contenidos/privacidad.aspx" Text="política de privacidad" />
y el
<asp:HyperLink ID="hlkAvisoLegal" runat="server" Target="_blank" NavigateUrl="~/contenidos/avisoLegal.aspx" Text="aviso legal" />
del sitio web.
</asp:Label>
<div>
<asp:TextBox ID="tbFakeCv" runat="server" CssClass="oculto" />
<asp:CustomValidator runat="server" ID="cvCbPoliticas" ErrorMessage="Es obligatorio aceptar la política de privacidad" CssClass="error" Display="Dynamic" ControlToValidate="tbFakeCv" ValidateEmptyText="true" ValidationGroup="ValidationButton" />
<ajax:ValidatorCalloutExtender ID="vceCvCbPoliticas" runat="server" TargetControlID="cvCbPoliticas" HighlightCssClass="error" CssClass="oculto" />
</div>
</div>
</div>
The solution was really simple. In my case, I was using the class "selectpicker", but I assumed that this functionality was implemented in the .js file. But no, It was missing. Just add the following code in the .js file and everything is working like a charm.
Sorry. I just want to comment it because sometimes the frontend and backend are responsible of different people, and a error in one part could be a pain in the ass to the other member of the team.
// Selectpicker
if ($.fn.selectpicker) {
$('.selectpicker:not(.jQ_todos)').selectpicker();
$('.selectpicker.jQ_todos').selectpicker({ noneSelectedText: 'Todos' });
}

Issues with bootstrap popover and asp:button

I would like to replace js windows by bootstrap popover in few pages but I have two issues and I don't find any solutions.
First, if I click on the button to display the popover, required fields are fired directly. Even if I fill in it the message "xx is a required field" stay displayed.
Second, when I try to save my data. Every fields contain an extra character ",". So if I put 10 in the price field in code behind the value of my field is "10,"
Thanks for your help :)
My code:
<asp:Button ID="btnAdd" runat="server" Text="add" CssClass="btn btn-info"data-toggle="popover" data-placement="top" title="add something" ValidationGroup="vgAdd" />
<div id="testBox" class="hide">
<asp:ValidationSummary ID="vsTest" runat="server" ValidationGroup="vgAdd" DisplayMode="BulletList" ShowMessageBox="false" ShowSummary="false" />
<div class="row">
<div class="form-group col-sm-6">
<asp:Label ID="lblPrice" runat="server" Text="price" AssociatedControlID="txtPrice" CssClass="control-label"></asp:Label>
<div class="input-group">
<span class="input-group-addon">$</span>
<asp:TextBox ID="txtPrice" runat="server" CssClass="form-control" MaxLength="12"></asp:TextBox>
</div>
<asp:CompareValidator ID="cvPrice1" runat="server" Display="None" ValidationGroup="vgAdd" ControlToValidate="txtPrice"
ErrorMessage="price is invalid." ValueToCompare="0" Type="Double" Operator="GreaterThan"></asp:CompareValidator>
<asp:CompareValidator ID="cvPrice" runat="server" Display="None" ValidationGroup="vgAdd" ControlToValidate="txtPrice"
Type="Double" Operator="DataTypeCheck" ErrorMessage="price is invalid."></asp:CompareValidator>
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ValidationGroup="vgAdd" ControlToValidate="txtPrice"
ErrorMessage="Default price is a required field." SetFocusOnError="True" Display="Dynamic" />
</div>
<div class="form-group col-sm-6">
<asp:Label ID="lblDesc" runat="server" Text="Description" AssociatedControlID="txtDesc" CssClass="control-label"></asp:Label>
<asp:TextBox ID="txtDesc" runat="server" CssClass="form-control" TextMode="MultiLine" MaxLength="255"></asp:TextBox>
</div>
</div>
<div class="clearfix">
<asp:Button ID="btnSave" runat="server" ValidationGroup="vgAdd" CausesValidation="true"
CssClass="btn btn-primary pull-right"
OnClick="btnSaveTest_Click" Text="Save" />
</div>
</div>
$("[data-toggle=popover]").popover({
html: true,
content: function () {
return $('#testBox').html();
}
});
To fix the first problem you need to remove ValidationGroup="vgAdd" from #btnAdd; you don't want to validate form when this button is clicked.
Regards the second one - there is nothing within your html code what could append comma. You must have something in the back-end code or javascript. I suggest you to debug all the way down from the point when the button #btnSave is clicked - first javascript, then code behind.

Separately validate two forms of the same page in asp.net using HTML5 validation

I have two forms for login and registration.I am trying to use HTML5 validation. When i click the form to submit login, controls of registration is validated and vice versa.How do I prevent that? I know there is something called validation group but I guess that works only for the validationcontrols provided by .NET.
Here's my code:
<h2><em> Registration </em></h2>
<asp:TextBox ID="tb_uname" class="login_mem" runat="server" placeholder="Name" required></asp:TextBox> <br />
<asp:TextBox ID="tb_address" class="login_mem" runat="server" placeholder="Address" ></asp:TextBox> <br />
<asp:TextBox ID="tb_email" class="login_mem" runat="server" placeholder="Email" ></asp:TextBox> <br />
<asp:TextBox ID="tb_pass" class="login_mem" TextMode="Password" runat="server" placeholder="Password" ></asp:TextBox> <br />
<asp:Button ID="btn_reg" runat="server" Text="Registration" CausesValidation="false"
onclick="btn_reg_Click"/>
</div>
<div id="log">
<h2><em>Login </em></h2>
<asp:TextBox ID="tb_name" class="login_mem" runat="server" placeholder="username" required></asp:TextBox> <br />
<asp:TextBox ID="tb_password" class="login_mem" runat="server" placeholder="password"></asp:TextBox><br />
<asp:Button ID="btn_log" runat="server" Text="Login" onclick="btn_log_Click"/>
<asp:Label ID="error" runat="server"></asp:Label>
</div>
You can add the novalidate tag to your forms to prevent them from validating when submitting them.
<form action="demo_form.asp" novalidate>
Or you could add it to one or multiple forms using javascrit/query:
$(document).ready(function() {
$("form").attr('novalidate', 'novalidate');
});

ValidationSummary always showing asterisks

I have the following setup for a changepassword control:
<asp:ChangePassword ID="ChangePassword1" runat="server">
<ChangePasswordTemplate>
<h3>
Password Management</h3>
<asp:TextBox ID="CurrentPassword" runat="server" TextMode="Password" Style="display: none;"></asp:TextBox>
<div class="field">
<asp:Label ID="NewPasswordLabel" runat="server" AssociatedControlID="NewPassword">New Password:</asp:Label>
<asp:TextBox ID="NewPassword" runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="NewPasswordRequired" runat="server" ControlToValidate="NewPassword" Display="Dynamic"
ErrorMessage="New Password" ToolTip="New Password is required."
ValidationGroup="ChangePassword1" EnableClientScript="false"></asp:RequiredFieldValidator>
</div>
<div class="field">
<asp:Label ID="ConfirmNewPasswordLabel" runat="server" AssociatedControlID="ConfirmNewPassword">Confirm New Password:</asp:Label>
<asp:TextBox ID="ConfirmNewPassword" runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="ConfirmNewPasswordRequired" runat="server" ControlToValidate="ConfirmNewPassword"
ErrorMessage="Confirm New Password" ToolTip="Confirm New Password is required." Display="Dynamic"
ValidationGroup="ChangePassword1" EnableClientScript="false"></asp:RequiredFieldValidator>
</div>
<div class="field">
<asp:CompareValidator ID="NewPasswordCompare" runat="server" ControlToCompare="NewPassword"
ControlToValidate="ConfirmNewPassword" Display="Dynamic" ErrorMessage="The Confirm New Password must match the New Password entry."
ValidationGroup="ChangePassword1"></asp:CompareValidator>
</div>
<asp:ValidationSummary ID="ChangeUserPasswordValidationSummary" runat="server" CssClass="failureNotification"
ValidationGroup="ChangePassword1"/>
<div class="action">
<asp:Button ID="ChangePasswordPushButton" runat="server" CommandName="ChangePassword"
Text="Change Password" ValidationGroup="ChangePassword1" />
<asp:Button ID="CancelPushButton" runat="server" CausesValidation="False" CommandName="Cancel"
Text="Cancel" Width="120" />
</div>
</ChangePasswordTemplate>
</asp:ChangePassword>
When i click on the ChangePasswordPushButton the validation all works as expected other than the validationsummary shows 2 asterisks!
Anyone have any idea why
I found out what the problem was. Error message was being set in a Theme!
Grrr
Try adding the following code on all of your validators and the ValidationSummary:
EnableTheming="False"

asp.net validation controls - CSS placement

I am creating an address control which would use some address validation APIs( google/bing etc) to validate the user entered address. I would also like to validate the fields in the client side (like required fields, Zip format etc) with asp.net validation controls. I am trying to build this with CSS and am using float to align the text boxes (or is there a better way ?) The validation controls have dynamic display and want to place them next to the text boxes when they are not validated. Right now it wraps around/messes up with the placement of other controls. May be there is a better way of doing it ? Here is my code
<style type="text/css">
.Wrapper{
width:auto;
height:auto;
}
.address{
width:500px;
height:auto;
}
.validator{
}
.textbox {
float:right;
}
label{
float:left;
}
.button-right{
float:right;
margin-right:290px;
}
div{
margin:5px;
}
.field
{
width:200px;
}
</style>
<div id="addressUI" class="address">
<div class="field" >
<label ID="lblStreet" for="txtStreet">Street: </label><label style="color:Red">*</label>
<asp:TextBox ID="txtStreet" runat="server" CssClass="textbox" Text="" ></asp:TextBox>
<asp:RequiredFieldValidator ID="rqdStreet" runat="server" ErrorMessage="Street is required" ControlToValidate="txtStreet" Display="Dynamic">
</asp:RequiredFieldValidator>
</div>
<div class="field">
<label ID="lblCity" for="txtCity">City: </label><label style="color:Red">*</label>
<asp:TextBox ID="txtCity" runat="server" Text="" CssClass="textbox" > </asp:TextBox>
<asp:RequiredFieldValidator ID="rqdCity" runat="server" ErrorMessage="City is required" ControlToValidate="txtCity" Display="Dynamic">
</asp:RequiredFieldValidator>
</div>
<div class="field">
<label ID="lblState" for="ddlState" >State: </label><label style="color:Red">*</label>
<asp:DropDownList ID="ddlState" runat="server" style="width:80px;margin-left:12px;" CssClass="">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rqdState" runat="server" ControlToValidate="ddlState" ErrorMessage="State is required" Display="Dynamic">
</asp:RequiredFieldValidator>
</div>
<div class="field">
<label ID="lblZip" for="txtZip">Zip: </label><label style="color:Red">*</label>
<asp:TextBox ID="txtZip" runat="server" CssClass="" Text="" style="width:50px;margin-left:22px;" ></asp:TextBox>
<asp:RequiredFieldValidator ID="rqdZIP" ControlToValidate="txtZip" runat="server" ErrorMessage="ZIP is required" Display="Dynamic">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regexValidator" runat="server"
ErrorMessage="Zip is invalid" Display="Dynamic" ControlToValidate="txtZip"
ValidationExpression="\d{5}(-\d{4})?"></asp:RegularExpressionValidator>
</div>
<div class="button-right">
<asp:Button ID="btnValidate" runat="server" Text="validate" OnClick="btnValidate_Click" CausesValidation="true" />
</div>
</div>
<head>
<style type="text/css">
label
{
display:inline;
float:left;
width:75px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="addressUI" class="address">
<div class="field">
<label id="lblStreet" for="txtStreet">
Street: <span style="color: Red">*</span>
</label>
<asp:TextBox ID="txtStreet" runat="server" CssClass="textbox" Text=""></asp:TextBox>
<asp:RequiredFieldValidator ID="rqdStreet" runat="server" ControlToValidate="txtStreet"
Display="Dynamic" ErrorMessage="Street is required">
</asp:RequiredFieldValidator>
</div>
<div class="field">
<label id="lblCity" for="txtCity">
City:<span style="color: Red">*</span>
</label>
<asp:TextBox ID="txtCity" runat="server" CssClass="textbox" Text=""> </asp:TextBox>
<asp:RequiredFieldValidator ID="rqdCity" runat="server" ControlToValidate="txtCity"
Display="Dynamic" ErrorMessage="City is required">
</asp:RequiredFieldValidator>
</div>
<div class="field">
<label id="lblState" for="ddlState">
State:<span style="color: Red">*</span>
</label>
<asp:DropDownList ID="ddlState" runat="server" CssClass="" Style="width: 80px">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rqdState" runat="server" ControlToValidate="ddlState"
Display="Dynamic" ErrorMessage="State is required">
</asp:RequiredFieldValidator>
</div>
<div class="field">
<label id="lblZip" for="txtZip">
Zip:<span style="color: Red">*</span>
</label>
<asp:TextBox ID="txtZip" runat="server" CssClass="" Style="width: 50px"
Text=""></asp:TextBox>
<asp:RequiredFieldValidator ID="rqdZIP" runat="server" ControlToValidate="txtZip"
Display="Dynamic" ErrorMessage="ZIP is required">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regexValidator" runat="server" ControlToValidate="txtZip"
Display="static" ErrorMessage="Zip is invalid" ValidationExpression="\d{5}(-\d{4})?"></asp:RegularExpressionValidator>
</div>
<div class="button-right">
<asp:Button ID="btnValidate" runat="server" CausesValidation="true"
Text="validate" />
</div>
</div>
</div>
</form>
</body>
</html>

Resources