I have aspx page where only one text box will be a required field. I am using JQuery to validate it.
My problem is the client side validation is not working.
The head section of my page is
<script src="../JavaScript/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="../JavaScript/jquery.validate.js" type="text/javascript"></script>
<script src="../JavaScript/CandidateValidation.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
checkRequiredInputs();
});
</script>
The CandidateValidation.js file contains
function checkRequiredInputs(){
$(".requiredField").validate({
rules:{
txtFName:{required: true}
},
messages:{
txtFName:"Name Required"
}
});
}
I have a CSS CLass lin my CSS File like
.requiredField
{
}
The Text box where for this input is
I need a suggestion or solution from you programmers,the most helpful I have ever found, from this helpful sites, waiting for your reply. Thanx in advance
For the code to work you will need to call validate() on the form containing your textbox.
For example:
[WebForm1.aspx]
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Validation.WebForm1" %>
<!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">
<link href="../Css/StyleSheet1.css" type="text/css" rel="Stylesheet" />
<script src="../JavaScript/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="../JavaScript/jquery.validate.js" type="text/javascript"></script>
<script src="../JavaScript/CandidateValidation.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
checkRequiredInputs();
});
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server" clientidmode="Static" >
<asp:TextBox runat="server" ID="txtFName" />
</form>
</body>
</html>
[CandidateValidation.js]
function checkRequiredInputs(){
$("#form1").validate({
rules:{
txtFName:{required: true}
},
messages:{
txtFName:"Name Required"
}
});
}
Setting clientidmode="Static" on form1 will make it have same ID on client side so it can be referenced easily from jQuery.
If you press enter in txtFName TextBox to submit validation will be performed on the form:
Related
This is my JS for the datepicker.
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$("#txtage").datepicker();
});
});
</script>
This is my asp server side control.
<asp:TextBox ID="txtage" runat="server" ReadOnly="true"></asp:TextBox>
I want when user reach on this textbox then one calender should open from which they can select age and that date should display into this textbox.
Please tell me how can i do this?
You have several problems. Your ID doesn't match. You're using txtage in one place and txtcity in another. Is that a copy paste error?
If you're using nested templated controls (or a master page), your ID's on the client side are likely different than on the server side. You can change how the ID's on the client side are generated like this:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$("#txtage").datepicker();
});
});
</script>
<td><asp:TextBox ID="txtage" runat="server" ClientIdMode="static" /></td>
You also haven't shown your code for making sure jQuery and jQuery UI are loaded on the page.
I just checked and this one works perfectly :
Default.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="testDatePicker.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script src="script.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" ID="myTextBox"></asp:TextBox>
</div>
</form>
</body>
</html>
script.js
$(function() {
$("#myTextBox").datepicker();
});
I may advice you to remove the ReadOnly proprety since the datepicker will try to modify the textBox but not so sure.
Just add .ClientID with the textbox id as follows.
JS
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$('#<%=txtage.ClientID%>').datepicker();
});
});
Asp.Net takes a property that is TextMode That loads a calendar, which has to be equal "Date" - TextMode="Date".
Example:
<asp:TextBox ID="txtage" TextMode="Date" runat="server" ReadOnly="true"></asp:TextBox>
I'm trying to reset my form using javascript on client side. The code looks like this:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>
<script type="text/javascript" >
function Reset() {
TextBox1.text = "";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="Reset()" />
</div>
</form>
</body>
</html>
This of course isn't working, I get the error that Button1 is undefinded. I tried looking control's name within browser (by viewing page source) and using that instead of its ID but that didn't work either.
you need to get the value using getElementById
var mybutton= document.getElementById('Button1');
mybutton.value = ""
I advise you to use jQuery for your javascript code. It's a standard anyway.
After you reference jQuery, you may rewrite your JavaScript as follows:
<script type="text/javascript" >
function resetForm() {
$("#<%=TextBox1.ClientID %>").val("");
}
</script>
If you still do not want to use jQuery, then you need to access your element using its client ID like following:
<script type="text/javascript" >
function resetForm() {
document.getElemenyById("<%=TextBox1.ClientID %>").value = "";
}
</script>
Also, as #Jon pointed out, you need to either rename your OnClientClick value to resetForm() or rename your JavaScript function.
I tried to call my helloworld by just including javascript inside webform but when running it page is blank on both chrome and firefox. In firefox error is
"XML Parsing Error: no element found"
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jquery01._Default" %>
<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
</script>
<script type="text/javascript">
function helloWorld() {
$("#divSample").append("Hello World!!");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divSample">
</div>
<script type="text/javascript"> helloWorld();</script>
</form>
</body>
</html>
I needed to add in codebehind:
protected override void Render(HtmlTextWriter writer)
{
this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(),
"startup", "<script type=\"text/javascript\">helloWorld();</script>");
base.Render(writer);
}
In that case it works but I don't understand why I just can't use the 1st syntax why it's so complicated for such a simple stuff ?
I also tried the suggestion but it didn't work either:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jquery01._Default" %>
<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
</script>
<script type="text/javascript">
function helloWorld() {
$("#divSample").append("Hello World!!");
}
</script>
<script type="text/javascript">
$(document).ready(function () {
helloWorld();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divSample">
</div>
</form>
</body>
</html>
Update: Seems ASP.NET can be unreliable in some circumstances with ajax / jquery ?
http://chiragrdarji.wordpress.com/2010/02/17/xml-parsing-error-no-element-found/
Try wrapping your helloWorld() call in jQuery $(document).ready syntax:
<script type="text/javascript">
$(document).ready(function(){
helloWorld();
});
</script>
Have you tried to run it in a debugger, like FireBug for FIreFox or Chrome's developer tools? (Haven't tried IE's yet... I copyied and pasted your code above and it worked fine for me...
try using a delay="delay" attribute on your script tag.
<script type="text/javascript" delay="delay">helloWorld();</script>
IE does not like if you try to modify the DOM structure when the html is still being rendered. this attribute tells the browser to delay script execution until it is done with the rendering.
Did you try getting rid of the Render override?
protected override void Render(HtmlTextWriter writer)
{
this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(),
"startup", "<script type=\"text/javascript\">helloWorld();</script>");
base.Render(writer);
}
I hope you can help me.
I have used on a localhost aspx page the following code so it autocompletes.
It works perfect.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function(){
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
});
</script>
</head>
<body>
API Reference: <input id="example" /> (try "C" or "E")
</body>
</html>
*However, when I download the scripts etc and run it in my local server (see code below), it doesn't work and it doesn't give me any errors
The page does take approx 10 seconds to load (instead of <1 second)
The autocomplete function doesn't work on the page, but everything else does.
Can anyone tell me what I am doing wrong ? Is there something I have to additional turn on locally or download ?
I am quite new at this so thanks for your pacience.
Also, I would like the data to come from a file, instead of the variable data.
I have downloaded the file called "jquery-1.3.2.min.js" as well and put it in the same directory as the other scripts...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta content="es" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Search POL-POD</title>
<style type="text/css">
.tahoma_small {
font-family: Tahoma;
font-size: x-small;
}
</style>
<script src="../autocomplete/jquery-latest.js"></script>
<link rel="stylesheet" href="../autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="../autocomplete/jquery.autocomplete.js"></script>
<script>
$(document).ready(function() {
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#txtfirst").autocomplete(data);
$("#txtsecond").autocomplete(data);
});
</script>
</head>
<body>
<form id="form1" runat="server" enableviewstate="False" autocomplete="True">
POL
<asp:TextBox id="txtfirst" runat="server"></asp:TextBox>
POD
<asp:TextBox id="txtsecond" runat="server"></asp:TextBox>
<asp:Button id="Button1" runat="server" Text="Button" />
<br />
....etc
First thing to do would be to include the file jquery-1.3.2.min.js into your document before any other script file that uses jquery, unless that's what jquery-latest.js is.
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
You are not getting any javascript errors?
finally after a lot of testing/searching, I found a solution.
Thanks anyway for your help!
I took out the "../" on all the links:
So: <script src="../autocomplete/jquery.autocomplete.js"></script>
is now: <script src="autocomplete/jquery.autocomplete.js"></script>
So here is all the code (you need the .js and .css files mentioned inside the "autocomplete" directory in order to work)
I hope it helps someone !
By the way, I have a total of 1200 cities in the variable "cities" and the .aspx page is only 20Kb
I also tested using a .csv file to import the data, but it took several seconds to load...having the values within the .aspx page is lightning fast and the page is still quite small (obviously it is not a good idea if you have several thousand values)
...
</style>
<script src="autocomplete/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="autocomplete/jquery.autocomplete.js" type="text/javascript"></script>
<link href="autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function() {
// datavalues is the array containing all the options...the .split(","); at the end means each option is separated by a comma,
var cities= "Madrid,Paris, Barcelona,Rome,London".split(",");
$("#txtfromcity").autocomplete(cities);
$("#txttocity").autocomplete(cities);
});
</script>
</head>
<body>
<form id="form1" runat="server" enableviewstate="False" autocomplete="True">
POL
<asp:TextBox id="txtfromcity" runat="server"></asp:TextBox>
POD
<asp:TextBox id="txttocity" runat="server"></asp:TextBox>
<asp:Button id="Button1" runat="server" Text="Button" />
...
As mentioned, make sure the necessary JavaScript files are loaded. Since you're coding in ASP.NET, you might want to use ResolveUrl to make sure these files are referenced correctly, independent of the requested page's location.
<script src="<%# ResolveUrl("~/autocomplete/jquery-latest.js") %>" type="text/javascript"></script>
<script src="<%# ResolveUrl("~/autocomplete/jquery.autocomplete.js") %>" type="text/javascript"></script>
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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>Untitled Page</title>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$(".button1").click(function ()
{
$("p").hide("slow");
});
$(".button2").click(function ()
{
$("p").show("slow");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="Button1" type="button" value="button" class="button1"/>
<input id="Button2" type="button" value="button" class="button2"/><h2>Welcome to F5 Technologies </h2>
<p>        F5 Technologies is a rapidly developing company, acquiring its position on the business market,
Our company helps make products
delivery more effective, efficient, and meaningful to our customers, and allow them to take greater
responsibility for their own new products.Software is developed by the most experienced development staffs. </p>
</form>
</body>
</html>
you need to include the jQuery library.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
You didn't include the jQuery library itself:
<script src="jquery.min.js" type="text/javascript">
</script>
You can also include it from a CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"
type="text/javascript"></script>
Despite my comment on the question, it looks like the main culprit is that you aren't actually referencing the jQuery JS file. Try something like:
<script type="text/javascript" src="Scripts/jquery-1.3.2.js"></script>