Develop Reference

Validation for my ASP textboxes is not working using javascript and ASP.NET

I just want to ask why my form validation for my asp textboxes is not working. It should be like when the user does not input a text in the textbox, a description in the paragraph tag will display to please input a text. But it is not working.Please help me on solving this.
Here is the javascript code:
function checkForm() {
var errors = [];
if ($("#itemBrand").value == "") {
errors[0] = "Please input a text!";
}
if ($("#itemModel").value == "") {
errors[1] = "Please input a text!";
}
if (errors.length > 0) {
if (errors[0] != null) {
document.getElementById("itemBrandValidate").innerHTML = errors[0];
}
if (errors[1] != null) {
document.getElementById("itemModelValidate").innerHTML = errors[1];
}
return false;
}
return true;
}
And here is the aspx:
<asp:TextBox ID="itemBrand" runat="server" BackColor="#FFFF66"
BorderColor="Black" BorderWidth="1px" Height="20px" Width="300px">
</asp:TextBox><br />
<p id="itemBrandValidate"></p>
<asp:TextBox ID="itemModel" runat="server" BackColor="#FFFF66"
BorderColor="Black" BorderWidth="1px" Height="20px" Width="300px">
</asp:TextBox><br />
<p id="itemModelValidate"></p>
<asp:Button ID="Button1" runat="server" CssClass="submitButton" Text="Save
Item" OnClick="Button1_Click" OnClientClick="return checkForm()"/>

Add ClientIdMode = "Static" on your textboxes. Otherwise the .NET platform generates an Id which is not the same as the server ID property and your Jquery selector is not working as expected.
For example:
<asp:TextBox ID="itemBrand" ClientIDMode="static" runat="server" BackColor="#FFFF66"
BorderColor="Black" BorderWidth="1px" Height="20px" Width="300px">
</asp:TextBox>

Client side id of asp.net server controls is different from server side id.
You may use ClientIDMode = "Static" (introduced in .NET 4.0) or you might use ClientID as shown below , also I've tried to re-write your validation function a bit.
function checkForm() {
var success = true;
var itemBrandID = "<%= itemBrand.ClientID %>" ;
if ($("#" + itemBrandID).value == "") {
success = false;
document.getElementById("<%= itemBrandValidate.ClientID %>").innerHTML = "Please input a text!";
}
var itemModelID = "<%= itemModel.ClientID %>" ;
if ($("#" + itemModelID).value == "") {
success = false;
document.getElementById("<%= itemModelValidate.ClientID %>").innerHTML = "Please input a text!";
}
return success;
}
Also suggest you to read this excellent post by Rick Strahl on A generic way to find ASP.NET ClientIDs with jQuery
Hope this helps !

Update one textbox using javascript function when another changes

I have a javascript function that counts characters in 2 different textboxes and puts the value in a third textbox.
This is the function is as follows:
function CountChars() {
var subjectLength = document.getElementById("txtBoxSubject").value.length;
var msgLength = document.getElementById("txtBoxMsg").value.length;
document.getElementById("txtBoxCnt").value = subjectLength + msgLength;
}
I call it from the Message text box using 'onkeyup' and it works fine.
<asp:TextBox ID="txtBoxMsg" runat="server" ClientIDMode="Static"
TextMode="MultiLine" onkeyup="CountChars()"></asp:TextBox>
The Subject textbox can be changed using a dropdown list or a user adding text to it. So using 'onkeyup' will not work for the Subject textbox. I tried using 'onchange' and nothing is entered in the Count text box.
This is the Subject html:
<asp:TextBox ID="txtBoxSubject" runat="server" ClientIDMode="Static" onchange="CountChars()"></asp:TextBox>
What am I doing wrong?
How can I call the javascript function whenver the text changes in the Subject textbox?
Thanks.
UPDATE
This is the Subject dropdown and the function that is called when it changes.
<asp:DropDownList ID="ddListSubject" runat="server" ClientIDMode="Static" AutoPostBack="true" onchange="SubjectChanged();">
</asp:DropDownList>
function SubjectChanged() {
var strSubject = document.getElementById("ddListSubject").value;
if (strSubject == "Custom") {
document.getElementById("txtBoxSubject").value = "";
document.getElementById("txtBoxSubject").focus();
}
else {
document.getElementById("txtBoxSubject").value = strSubject;
}
CountChars(); //number appears for a second then disappears
}

it seems like you not terminating the function with semi column. use something like onkeyup="CountChars();"

Your .aspx are using MasterPage? The names of Asp.Net objects changing in the rendered page. Try using <% =% Objeto.ClientID>.
function CountChars() {
var subjectLength = document.getElementById("<%=txtBoxSubject.ClientID %>").value.length;
var msgLength = document.getElementById("<%= txtBoxMsg.ClientID %>").value.length;
document.getElementById("<%= txtBoxCnt.ClientID %>").value = subjectLength + msgLength;
}
Or maybe use JQuery. Look at the code below, works as you described.
Subject:
<input id="text1" type="text" />
<br />
Msg
<input id="text2" type="text" multiple style="height: 100px" />
<br />
Total: <span id="total">0</span>
<script type="text/javascript">
$(document).ready(function () {
$("input[type=text]").keyup(function () {
var total = 0;
$("input[type=text]").each(function () {
total += $(this).val().length;
});
$("#total").html(total);
});
});
</script>
Hope this helps you

Dummy me...I removed the AutoPostBack="true" from the Dropdown!
Thanks for all of your help!!

Returning Values in javascript function

I have a scenario where there are 4 text boxes and one Radio Button list. If i click the Submit button by leaving all fields it should alert me . I used 4 Required Validator s for text boxes and a java script function for the radio button list.
My mark up language and function is:
function Validate() {
var radio = document.getElementsByName("rdbGender");
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
return true;
}
else
{
alert("Choose a Gender");
return false;
}
}
}
Aspx page is:
<asp:Button ID="btnSave" Text="Save" runat="server" Width="50px" OnClientClick= "Validate()"
OnClick="btnSave_Click" />
When ever i click the button by leaving fiealds empty, and leaving radio button list with out selecting a item, it is alerting but if i press ok it is executing further. I read in one website that if we write " return true " after alert has been showed and clicking ok it will execute further,,but i wrote "return false" after alert it means untill i check one radio button it should not execute...Where am i wrong??
Javascript:
<script type="text/javascript">
function Validate() {
var checkedVal = false;
var radio = document.getElementsByName("rdbGender");
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
checkedVal = true;
return checkedVal;
}
else {
alert('Chhooose gender');
return checkedVal;
}
}
}
</script>
Mark up design:
<tr>
<td>
Gender
</td>
<td>
<asp:RadioButtonList ID="rdbGender" RepeatDirection="Horizontal" runat="server">
<asp:ListItem Value="MALE">
</asp:ListItem>
<asp:ListItem Value="FEMALE">
Female
</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
.
.
.
.![enter image description here][2]
<td>
<asp:Button ID="btnSave" Text="Save" runat="server" Width="50px" ValidationGroup="Star" OnClientClick="return Validate()"
OnClick="btnSave_Click" />
</td>

Try using return when calling client function.
<asp:Button ID="btnSave" Text="Save" runat="server" Width="50px"
OnClientClick= "return Validate();"
OnClick="btnSave_Click" />
For first iteration of for, If first radio button is not checked it would go to else part which is showing alert and returning false. Please implement below code.
function Validate() {
var checkedval=false;
var radio = document.getElementsByName("rdbGender");
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
checkedval=true;
return checkedval;
}
}
return checkedval;
}

A function can only have one return value. When return true is executed, the function immediately return true and stop going further. Therefore, comment out the return true and try.
function Validate() {
var radio = document.getElementsByName("rdbGender");
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
//return true;
//this return true causes the problem.
}
else
{
alert("Choose a Gender");
return false;
}
}
}

ASP.net CustomValidator - ClientValidationFunction to check value not blank and not initial value

I have following code which validates the value of a textbox to make sure it's not blank but I also need to check that it does not equal the initial value of the textbox (defaultValue).
Here's what I have so far...
Javascript:
function textValidation(source, arguments)
{
if ( arguments.Value != "" ){ // && arguments.Value != arguments.defaultValue
arguments.IsValid = true;
} else {
$(source).parents("div").css({"background-color":"red"});
arguments.IsValid = false;
}
}
.net
<asp:TextBox runat="server" ID="Initial" Text="Initial" defaultValue="Initial" Width="120px" />
<asp:CustomValidator id="Initial_req"
ControlToValidate="Initial"
ClientValidationFunction="textValidation"
ValidateEmptyText="true"
runat="server"
CssClass="errorAsterisk"
Text="*"
ErrorMessage="Complete all correspondence fields" />

You can do what you want using a CSS class to identify the TextBox and retrieve it with jQuery, allowing you to obtain the attribute defaultValue:
Markup:
<asp:TextBox runat="server"
ID="Initial"
Text="Initial"
defaultValue="Initial"
Width="120px"
ValidationGroup="Test"
CssClass="to-validate" />
<asp:CustomValidator ID="Initial_req"
ControlToValidate="Initial"
ClientValidationFunction="textValidation"
ValidateEmptyText="true"
runat="server"
CssClass="errorAsterisk"
Text="*"
ErrorMessage="Complete all correspondence fields"
ValidationGroup="Test" />
<asp:Button ID="btnValidate" runat="server" Text="Validate" ValidationGroup="Test" />
Javascript:
function textValidation(source, arguments) {
var initialValue = $(source).siblings(".to-validate:first").attr("defaultValue");
if (arguments.Value != "" && arguments.Value != initialValue) { // && arguments.Value != arguments.defaultValue
arguments.IsValid = true;
} else {
$(source).parents("div").css({ "background-color": "red" });
arguments.IsValid = false;
}
}

1)You not pass source and arguments parameters in your function .
2) then call this syntax way for ClientValidationFunction="javascript:textValidation(param1,oaram2);return true;"
3)you can use required field validation in text box here
4)or another way is (we dont use any parameter ) for here

A RequiredFieldValidator will prevent blanks as well as initial values.
Use attribute InitialValue.
See here:
Use it to prevent any value that you like being entered into a TextBox. The TextBox doesn't have to have that value embedded at the start - it just can't be submitted with that value.

How to disable a linkbutton to prevent multiple submits

I have HTML code like this:
<asp:LinkButton ID="AddButton" runat="server" OnClick="AddPatientBtn_Click">
<span class="Normal">Add</span>
</asp:LinkButton>
I find if we click 'Add' several times, it will add several patient records, so I want to change the code like this:
<asp:LinkButton ID="AddButton" runat="server" OnClick="AddPatientBtn_Click" OnClientClick="return DisableButton(this)">
<span class="Normal">Add</span>
</asp:LinkButton>
js:
function DisableButton(button) {
document.all("AddButton").click;
button.href = "javascript:void(0);";
button.setAttribute("disabled", "disabled");
}
But this doesn't work; I can still add many patient records.
What should I do?

Thanks for all of you!
I find that LinkButton may not have the disable attribute, it is a <a> in html page.
so I use another solution
<asp:LinkButton ID="AddButton" runat="server" OnClick="AddPatientBtn_Click" OnClientClick="return DisableButton()">
<span class="Normal">Add</span>
</asp:LinkButton>
js:
var pending = false;
function DisableButton() {if (pending) {
alert("The new patient is being created. Please wait...");
return false;
}
else {
if (Page_ClientValidate(""))
pending = true;
return true;
}
}

You can just say
AddButton.Enabled = false;
in the code behind page
or you can write
document.getElementById("AddButton").disabled = true;

var button = document.getElementById("AddButton");
button.setAttribute("disabled", "true");