Validation is not working in asp.net webform project for some reason event on a simple test page validation doesnt work, It always returns true and submits the form without validating.
Below is the actual test page i am trying to make it work to know the reason why it is not working.
Could issue be related to some reference issue or wrong library
Same file works in other project but not in this project, did i miss any file or reference.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="en_Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rf1" ControlToValidate="TextBox1" ValidationGroup="vgForm" runat="server" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
<asp:Button ID="Button1" ClientIDMode="Static" runat="server" Text="Button" OnClientClick="return ValidateForm();" ValidationGroup="vgForm" />
</div>
</form>
</body>
<script>
function ValidateForm() {
Page_ClientValidate("vgForm");
if (Page_IsValid) {
alert('it is valid');
return true;
}
else {
alert('No valid');
return false;
}
}
</script>
</html>
Related
I use a button click with the asp.net validation group and client side validation (javascript). It give the first preference to javascript validation if it returns true means it directly go to the serverside button click event not check the asp.net validations.
<asp:ImageButton ID="img_btn_register" runat="server"
ImageUrl="~/images/Register1.png"
**OnClientClick="return validat_form()"** OnClick="img_btn_register_Click1"
**ValidationGroup="qa"** />
Based on your question I understand that- You need your field validations should occur first and then script should execute.
You can call Page_ClientValidate() in your client script to explicitly execute all validations and if it successful then only Client Script should be executed.
Here is a small demo on the same:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function ClientScript() {
if (Page_ClientValidate("qa"))**// first check the validators in ValidationGroup "qa"**
{
alert("Save all Modification?");
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ValidationGroup="qa" runat="server" ControlToValidate="TextBox1"
Text="*" ErrorMessage="Value in Textbox1 is required!">
</asp:RequiredFieldValidator>
<asp:Button ID="Button1" runat="server" ValidationGroup="qa" Text="Test Validation" OnClientClick="ClientScript()" />
</div>
</form>
</body>
</html>
I am using ModalPopupExtender from AjaxToolkit for asp.net. I am trying to have a ModalPopupExtender triggered with different buttons. The problem is that unless I am using the TargetControlID the popup opens and quickly closes within under a second. I need this popup to be accessible
by several different buttons with the same panel being used everytime.
The code below should replicate the problem nicely, on my actual application it almost works fine. Even content being updated with the chosen panel of the popup except that it closes after about 1/2 sec when i call .show() from OnClientClick;
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
//Function to Hide ModalPopUp
function Hidepopup() {
$find('AjaxPopupHi').hide();
}
//Function to Show ModalPopUp
function Showpopup() {
$find('AjaxPopupHi').show();
}
</script>
</head>
<form id="form1" runat="server">
<asp:LinkButton ID="lnk" OnClientClick = "Showpopup()" runat="server" Text="hi"></asp:LinkButton>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:Button ID="Button_dummy" Style="display: none" runat="server" Text="Button" />
<ajaxToolKit:ModalPopupExtender ID="mpe" runat="server" BehaviorID="AjaxPopupHi" TargetControlID="Button_dummy" PopupControlID="pnl"
CancelControlID="close" />
<!--BELOW panel does not remain OPEN :/-->
<asp:Panel ID="pnl" runat="server" CssClass="popupPanel">
<div>
Hi!!!
</div>
<asp:Button ID="close" runat="server" Text="Close" />
</asp:Panel>
</form>
Thanks
You can use like this
OnClientClick = "return Showpopup()"
function Showpopup() {
$find('AjaxPopupHi').show();
return false;
}
You must use return in you OnClientClick combining your code
<asp:LinkButton ID="lnk" OnClientClick = "return Showpopup()" runat="server" Text="hi">
</asp:LinkButton>
and your javascript function should be like
function Showpopup() {
$find('AjaxPopupHi').show();
return false;
}
It is very late but lets hope this helps someone who is looking for the answer.
When you click, a postback occurs and the page reloads. If you use updatepanel then your popup message will remain after page load. See this example below:
Aspx :
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Popup.aspx.cs" Inherits="Popup_example_Popup" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
//Function to Hide ModalPopUp
function Hidepopup() {
$find('AjaxPopupHi').hide();
}
//Function to Show ModalPopUp
function Showpopup() {
$find('AjaxPopupHi').show();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="udpOutterUpdatePanel" runat="server">
<ContentTemplate>
<asp:LinkButton ID="lnk" OnClientClick="Showpopup()" runat="server" Text="hi"></asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<asp:Button ID="Button_dummy" Style="display: none" runat="server" Text="Button" />
<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" BehaviorID="AjaxPopupHi" TargetControlID="Button_dummy" PopupControlID="pnl"
CancelControlID="close" />
<asp:Panel ID="pnl" runat="server" CssClass="popupPanel">
<div>
Hi!!!
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="close" runat="server" Text="Close" OnClick="close_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</form>
</body>
</html>
Code behind :
using System;
public partial class Popup_example_Popup : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void close_Click(object sender, EventArgs e)
{
mpe.Hide();
}
}
<%# Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" ClientIDMode="AutoID" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="server">
<%
foreach (var item in AllSales)
{
//Here i have just set a breakpoint to see if it loops the AllSales list when I press the update button
}
%>
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<p>Update Panel: DateTime.Now: <%= DateTime.Now.ToString() %></p>
<asp:Button runat="server" ID="Submit" Text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
The script manager code is in the masterpage :
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
Problem here is that everytime i click the Update button it loads the page again and loops the "AllSales" list , i want to only update a section and not have to do unnecessary loops.
Here is the fun part : If i remove the masterpage, it works ! But with the masterpage, it dont , why?!
You need to use a server control to initiate the update rather than a normal html input button. Try using:
<asp:Button ID="ActivitySubmit" Text="Submit" runat="server" />
The reason for such behavior is that you use plain html submit button instead of ASP.NET server button. Thus page submitted to server without involving ASP.NET Ajax functionality. Replace ActivitySubmit button with asp:Button control
Set the UpdateMode mode property to Conditional. The default value for UpdateMode is Always, If the UpdateMode property is set to Always, the UpdatePanel control's content is updated on every postback that originates from anywhere on the page, reference
Edit: You are using input type="submit" which probably causing the post back replace it with asp:Button to get the ajax call to work.
I have tested the same code with only change in the button type, and it refreshes only the update panel content. The problem is your site is targeting .NET 3.0 but you need to target at least to 3.5. I have tested on 3.0, it does not work but on 3.5 and 4.0, it works fine. So the easier and safer solution is to target 3.5 onwards. But If you want to use .NET 3.0, I will try to find a workaround. Please let me know.
I tried to recreate your problem but it is working fine in my case. Try creating a new .aspx file and paste the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>Outside UpdatePanel</p>
<asp:ScriptManager runat="server" ID="ScriptManager1">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<p>DateTime.Now: <%= DateTime.Now.ToString() %></p>
<asp:Button runat="server" ID="SubmitButton" Text="Go" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
This was tested in VS2010 using .NET 4.0 in an Empty Web Application. Does this work for you as well? I tried the same example using a Master page with a content placeholder. This yields the same (properly working) results. From this I gather there is something else going on on your page that we're missing. Is there?
[Edit]
I made another simple example, this time with a Master page and a Content page.
Master page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
<p>Master Page: DateTime.Now: <%= DateTime.Now.ToString() %></p>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Aspx page:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<p>Update Panel: DateTime.Now: <%= DateTime.Now.ToString() %></p>
<asp:Button runat="server" ID="Submit" Text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
Again this works without a problem in the same environment as the other example. It looks like you'll have to tell me about the .NET framework you're targeting and what else you've got set up in your master page and aspx page, because:
In .Net 3.5 and up this will work. In lower versions however, it won't. I'm afraid I've been unable to figure out how to fix it in lower versions though. :(
In your Page tag just add
ClientIDMode="AutoID"
I think you can try and put the form inside the updatepanel, or you can try and change children as triggers property of the updatepanel like this :
<asp:UpdatePanel runat="server" ID="UpdatePanel1" ChildrenAsTriggers="False">
and then add the button as trigger like this
ScriptManager.GetCurrent(Page).RegisterAsyncPostBackControl(SubmitButton);
try addind this part to your UpdatePanel:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Submit" />
</Triggers>
I used this example from here
http://www.asp.net/ajaxlibrary/jqueryui_progressbar.ashx
Every thing works fine except the progress
This is my design
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default15.aspx.cs" Inherits="Default15" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css"
rel="Stylesheet" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript">
$("#progress").progressbar({
value: document.getElementById('<%=litprogress.ClientID%>').value
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>
Wizard progress</h1>
<div id="progress">
<asp:Literal ID="litprogress" runat="server"></asp:Literal>
</div>
<asp:Panel ID="step1" runat="server">
<h1>
Step 1</h1>
<asp:Button ID="GoToStep2" Text="Next" runat="server" OnClick="GoToStep2_Click" />
</asp:Panel>
<asp:Panel ID="step2" runat="server">
<h1>
Step 2</h1>
<asp:Button ID="GoToStep3" Text="Next" runat="server" OnClick="GoToStep3_Click" />
</asp:Panel>
<asp:Panel ID="step3" runat="server">
<h1>
Step 3</h1>
<asp:Button ID="GoToStep4" Text="Next" runat="server" OnClick="GoToStep4_Click" />
</asp:Panel>
<asp:Panel ID="step4" runat="server">
<h1>
Completed</h1>
</asp:Panel>
</div>
</form>
</body>
</html>
Instead of required I am getting this
So can any one tell where I went wrong
Getting some warnings regarding CSS and the error is as follows
Error: document.getElementById("litprogress") is null
I think that the progress bar init is happening before the DOM is fully loaded, put the code inside $(document).ready.
I have a parent page (testFrame.aspx) including an iframe.
The iframe is an aspx form (form.aspx) with an AsyncFileUpload control (ajaxcontroltoolkit).
The form contains a textbox and a required field validator.
In the bt_Send Codebehind, I check if the user entered a text in the text box and if not I show an error message.
Now, if I test my parent form and I enter a text and click "send" I see my feedback message (the text I entered in the textbox).
If I don't enter a text, and I click send, I get the error message.
The weird thing happens now: if I don't enter a text but I upload a file with the AsyncFileUpload.
I click "send" and instead of getting the error message, I'm redirected to form.aspx outside my parent page (like target="_top"), without error message. I just see the clean form not anymore in my iframe.
I don't want that. I want the form to stay inside my parent page
testForm.aspx looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
This is a container page. The following is inside an iframe:
<br />
<iframe src="form.aspx" width="800px" height="400px"></iframe>
</div>
</form>
</body>
</html>
form.aspx looks like this:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="form.aspx.cs" Inherits="TestToolkit.form" %>
<%# Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Test Form</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblFirstName" runat="server" Text="First Name"></asp:Label>
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
<br /><br />
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
Upload picture: <asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" ClientIDMode="AutoID" />
<div id="uploadOk" style="position: relative; left: 330px; bottom: 40px; width:0px; height:0px; display: none;"><asp:Image ID="imgOk" ImageUrl="_img/check-mark-40.png" runat="server" style="" AlternateText="Erledigt!" /></div>
<br /><br />
<asp:Button ID="btSend" runat="server" onclick="btSend_Click" Text="Send" />
<br /><br />
<asp:Label ID="lblFeedback" runat="server"></asp:Label>
<asp:RequiredFieldValidator runat="server" ID="rfvFirstName" ControlToValidate="txtFirstName" Display="None" EnableClientScript="false" />
</div>
</form>
</body>
</html>
and the code behind form.aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestToolkit
{
public partial class form : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btSend_Click(object sender, EventArgs e)
{
//ShowOrRemoveErrors();
if (IsValid)
{
lblFeedback.Text = txtFirstName.Text;
}
else
{
lblFeedback.Text = "Please enter your name";
}
}
}
}
Well I guess I found the answer to my question.
The problem comes if a file was uploaded AND the fields are not valid (or required fields have no text).
The problem comes on postback. So what I did is to implement a client side validation using EnableClientScript="true":
<asp:RequiredFieldValidator runat="server" ID="rfvFirstName" ControlToValidate="txtFirstName" Display="None" EnableClientScript="true" />
With client side validation there is no postback unless all my required fields are filled correctly.
Hope this helps people with my same problem.