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 !

How to make asp textbox empty by JavaScript

I have got a problem with making textbox empty using JavaScript function.
If checkbox is unchecked the asp:Textbox should make disabled and empty.
It happens, but in code behind all the time is visible previous value which was entered before in that textbox.
<asp:RadioButton ID="radio_fx_no" runat="server" Text="NO" GroupName="optradio1" onclick="CheckBoxChangedDisableFx(this);" />
<asp:RadioButton ID="radio_fx" runat="server" Text="YES" GroupName="optradio1" onclick="CheckBoxChangedAbleFx(this);" />
<asp:TextBox ID="txt_fx" ClientIDMode="Static" runat="server" Enabled="false" />
<script>
function CheckBoxChangedAbleFx(checkbox) {
if (checkbox.checked == true) {
document.getElementById('<%= txt_fx.ClientID %>').disabled = false;
}
}
function CheckBoxChangedDisableFx(checkbox) {
if (checkbox.checked == true) {
document.getElementById('<%= txt_fx.ClientID %>').value = "";
document.getElementById('<%= txt_fx.ClientID %>').disabled = true;
}
}
</script>
Any ideas what is wrong in my code?

This problem is called the Cacheing the browser data. You can try three things in this case:
1) Clear value of textbox in pageload event at every postback:
if (IsPostBack)
{
txt_fx.text = "";
}
and in your aspx code make text="":
<asp:TextBox ID="txt_fx" Text="".../>
2) Set AutoComplete property of textbox to off for html input
or disable autocompletetype property of asp textbox
<asp:TextBox ID="txt_fx" autocompletetype="disabled".../>
3) or Set AutoComplete of your FORM tag of your page to "off"
If you want to clear actual value of textbox on server side without postback then you need to use AJAX.
Hope it will help you..!!

in .cs file,Page_Load method,plus such code:
if(!Page.IsPostBack)
{
radio_fx.Attributes.Add("onClick", "return CheckBoxChangedState(this,false);");
radio_fx_no.Attributes.Add("onClick", "return CheckBoxChangedState(this,true);");
}
and in .aspx file,change as follows:
<script type="text/javascript">
function CheckBoxChangedState(checkbox, state) {
if (checkbox.checked == true) {
document.getElementById('<%= txt_fx.ClientID %>').value = "";
document.getElementById('<%= txt_fx.ClientID %>').disabled = state;
}
}
<asp:RadioButton ID="radio_fx_no" runat="server" AutoPostBack="false" Text="NO" GroupName="optradio1" />
<asp:RadioButton ID="radio_fx" runat="server" AutoPostBack="false" Text="YES" GroupName="optradio1" />

Disable submit button if two textboxes have no value not working properly

I have two text-boxes and one button. I want that the button be disabled if one of the textboxes have no value. With this code the button is enabled if just one textbox has a value.
HTML
<asp:TextBox ID="TextBox2" runat="server" onblur = "Toggle()"></asp:TextBox>
<asp:TextBox ID="TextBox1" runat="server" onblur = "Toggle()"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" Enabled = "false" />
JavaScript
function Toggle() {
var txt1 = document.getElementById("<%=TextBox1.ClientID %>");
var txt2 = document.getElementById("<%=TextBox2.ClientID %>");
var btn = document.getElementById("<%=Button1.ClientID %>");
if (txt1.value == "" && txt2.value == "") {
btn.disabled = true;
} else {
btn.disabled = false;
}
}

Try
if (txt1.value && txt2.value) btn.disabled = false;
else btn.disabled = true;

Cancel ajax modalpopupextender using javascript

I have a modalpopupextender with a targetcontrolid = buttCopyFormula. The buttCopyFormula is wrapped in a span tag for the user to verify they want to proceed. The button also has a javascript function that verifies there is text in one of the fields and if there is places it in a textbox within the modalpopup.
If there isn't text in the field I want to cancel the popup and display a message.
I've had the span around the button for a while, but am just adding the verification function. I would imagine there is a better way to do this, but just not sure what it is.
What is the best way to execute this functionality?
TargetControl Button
<span onclick="return confirm('Copy the selected formula?')">
<asp:ImageButton ID="buttCopyFormula" ImageAlign="AbsBottom" OnClientClick="transferName()" runat="server" ImageUrl="~/images2020/copy_32.png" />
<b style="color:White">Copy</b>
</span>
Modal Popup
<asp:ModalPopupExtender ID="ModalPopupExtender2" Y="20" runat="server"
BackgroundCssClass="modalBackground" CancelControlID="buttFormulaCancel"
PopupControlID="Panel2" TargetControlID="buttCopyFormula">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel2" runat="server" CssClass="modalQuestionBackground"
Style="display:none"><br />
<h5>Enter a Name for the Formula</h5>
<br /><br />
Formula Name:
<asp:TextBox ID="txtFormulaNameNew" CssClass="controltext" Width="65%" runat="server" Text=""></asp:TextBox><br /><br />
<center>
<asp:Button ID="buttFormulaSaveNew" runat="server" CssClass="button"
OnClick="buttFormulaSaveNew_Click" Text="Save Formula" />
<asp:Button ID="buttFormulaCancel" runat="server" CssClass="button"
Text="Cancel" />
</center>
<br />
</asp:Panel>
JavaScript Function
function transferName() {
var v = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaNameNew").value;
var f = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaName");
if (v === "") {
alert("Please select the formula you want to copy before proceeding");
return false;
}
f.value = v
}
I've been working on this and first removed the span around the button, put a fake hyperlink for the modal popup and added a behavior id to the popup. I have also changed the javascript as follows...
New Javascript
function transferName() {
var v = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaNameNew").value;
var f = document.getElementById("ctl00_ContentPlaceHolder1_txtFormulaName");
if (f === "") {
alert("Please select the formula you want to copy before proceeding");
return false;
} else {
if (confirm('Copy selected formula?')) {
f.value = v;
var mod = $find("ModalPopupExtender2");
alert(mod.id.toString);
mod.show;
return false;}
}
}
I still can't get the modalpopup to show. I imagine it's because it's wrapped in an update panel. Any ideas??

You may subscribe to showing event of ModelPopupExtender and cancel showing dependent on some conditions. Put script below at page AFTER THE ScriptManager control
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler);
function pageLoadedHandler(sender, args){
var popupExtender = $find("ModalPopupExtender2"); // BehaviorId of popup extender
popupExtender.remove_showing(onPopupShowing);
popupExtender.add_showing(onPopupShowing);
}
function onPopupShowing(sender, args) {
var txtFormulaNameNew;
var txtFormulaName = $get("<%= txtFormulaName.ClientID %>");
if (formulaTextBox.value.length === 0) {
alert("Please select the formula you want to copy before proceeding");
args.set_cancel(true);
} else {
if (confirm('Copy selected formula?')) {
txtFormulaNameNew = $get("<%= txtFormulaNameNew.ClientID %>");
txtFormulaNameNew.value = txtFormulaName.value;
}
}
}

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.