We Keep Coding

Javascript Validation not working in C# (Error message)

Here is the javascript validation code:
if (document.getElementById("<%=txtCategoryName.ClientID %>").value.trim() == "") {
document.getElementById("<%=dvMessage.ClientID %>").innerHTML = "Please enter Category.";
document.getElementById("<%=txtCategoryName.ClientID %>").focus();
document.getElementById("<%=txtCategoryName.ClientID %>").classList.add("ErrorControl");
// document.getElementById("<%=txtCategoryName.ClientID %>").style.outline = '1px solid red';
// document.getElmentById("<%=txtCategoryName.ClientID %>").style.border = '3px solid red';
return false;
}
if (document.getElementById("<%=txtCategoryDescription.ClientID %>").value.trim() == "") {
document.getElementById("<%=dvMsg.ClientID %>").innerHTML = "Please enter Category Description.";
document.getElementById("<%=txtCategoryDescription.ClientID %>").focus();
document.getElementById("<%=txtCategoryDescription.ClientID %>").classList.add("ErrorControl");
// document.getElementById("<%=txtCategoryDescription.ClientID %>").style.outline = '1px solid red';
return false;
}
}
<script>
function checkfunction(val) {
if (val != "") {
document.getElementById("<%=txtCategoryName.ClientID %>").classList.remove("ErrorControl");
// document.getElementById("<%=dvMessage.ClientID %>").style.display = 'none';
document.getElementById("<%=txtCategoryDescription.ClientID %>").classList.remove("ErrorControl");
// document.getElementById("<%=dvMsg.ClientID %>").style.display = 'none';
}
}
</script>
Here is the text box:
<div class="field">
<div id="dvMessage" runat="server" style="color: Red" >
</div>
<label>
Category Name <em>*</em>
</label>
<div>
<asp:TextBox ID="txtCategoryName" runat="server" CssClass="form-01-control" onkeyup="checkfunction(this.value)" placeholder="Enter Category Name" ></asp:TextBox>
</div>
<div id="dvMsg" runat="server" style="color: Red">
</div>
<label>
Category Description <em>*</em></label>
<div>
<asp:TextBox ID="txtCategoryDescription" runat="server" CssClass="form-01-control" onkeyup="checkfunction(this.value)" placeholder="Enter Category Description"></asp:TextBox>
</div>
<label>
Parent Category </label>
<div>
<asp:DropDownList ID="ddlParentCategory" runat="server" Width="250px" class="form-01-control">
</asp:DropDownList>
</div>
<label>
Category Image</label>
<div>
<asp:FileUpload ID="fuImage" runat="server" />
<asp:Image ID="imgCategory" Width="100" Height="100" runat="server" />
</div>
</div>
The problem is that validation not working properly. The ERROR MESSAGE shows I'm having a problem. Please tell me what to do for multiple textbox and dropdown and how to use javascript validation?

Sir, is something like this what you need? And as Abhay said, there's a load of plugins you can use, jquery is just a javascript library.
<script>
var catName = {
'label' : document.getElementById("<%=dvMessage.ClientID %>"),
'textbox' : document.getElementById("<%=txtCategoryName.ClientID %>")
},
catDesc = {
'label' : document.getElementById("<%=dvMsg.ClientID %>"),
'textbox' : document.getElementById("<%=txtCategoryDescription.ClientID %>")
},
noText = function hasText( textbox ) {
return textbox.value.trim().length === 0;
};
// This entire part might be redundant, unless the textbox comes back from the server with text already inside it.
// If the textbox is always empty at startup, this part could be replaced by placing the text already into the div.
if (noText(catName.textbox)) {
catName.label.innerHTML = "Please enter Category.";
catName.textbox.focus()
catName.textbox.classList.add("ErrorControl");
}
if (noText(catDesc.textbox)) {
catDesc.label.innerHTML = "Please enter Category Description.";
catDesc.textbox.focus()
catDesc.textbox.classList.add("ErrorControl");
}
function checkfunction( textValue ) {
var catNameCls = catName.textbox.classList,
catDescCls = catDesc.textbox.classList;
if (textValue.length !== 0) {
if (catNameCls.contains("ErrorControl")) catNameCls.remove("ErrorControl");
else catNameCls.add("ErrorControl");
if (catDescCls.contains("ErrorControl")) catDescCls.remove("ErrorControl");
else catDescCls.add("ErrorControl");
}
}
</script>

jQuery .click() not working on ajax modalpopupextender button click

I have to invoke ImageButton (in repeater footer) click event from jQuery on response to ajax modalpopupextender button. I tried the below code but it's not working. It doesn't throw any error but PostBack is not happening.
var isCurrentPortalFormSaveClicked = false;
var controlsValuesOnload = '';
var controlsValuesWhileExit = '';
window.onbeforeunload = beforeUnload;
window.onload = getValues;
function getValues() {
controlsValuesOnload = $('form').serialize();
}
function beforeUnload() {
if (isCurrentPortalFormSaveClicked == true) return;
controlsValuesWhileExit = $('form').serialize();
if (controlsValuesOnload != controlsValuesWhileExit) {
return "Your changes have not been saved. To stay on the page so that you can save your changes, click Cancel.";
}
}
function confirmExit(callBackMethod, saveButtonId) {
controlsValuesWhileExit = $('form').serialize();
if (controlsValuesOnload != controlsValuesWhileExit) {
return ShowUnSavedChangesWarning(callBackMethod,saveButtonId);
}
else {
window.open('', '_self', '');
window.close();
return false;
}
}
function ShowUnSavedChangesWarning(callBackMethod, saveButtonId) {
saveButtonControl = saveButtonId;
callBack = callBackMethod;
$find('<%= modalPopUpConfirmExitWarning.ClientID %>').show();
return true;
}
function saveFormAndClose() {
HideUnSavedChangesWarning();
if (callBack != '' && callBack != null && callBack != undefined) {
return callBack();
}
else if (saveButtonControl != '' && saveButtonControl != undefined) {//if the control is other than ribbon save and close button.
saveButtonControl.click();
window.open('', '_self', '');
window.close();
}
else if ($('.saveandclose') != null && $('.saveandclose') != '' && $('.saveandclose') != undefined) {
$('.saveandclose')[0].click();
}
return false;
}
function closeForm() {
isCurrentPortalFormSaveClicked = true;
window.open('', '_self', '');
window.close();
return false;
}
function SaveNewNotes() {
//Save Notes
var notes = $('.newNote').first().val();
if (notes != null && notes != "") {
$('.saveNotes')[0].click();
}
return true;
}
ASPX:
<ajax:ModalPopupExtender ID="modalPopUpConfirmExitWarning" CancelControlID="btnCancel"
runat="server" PopupControlID="panelConfirmExitWarning" TargetControlID="btnHiddenConfirmExitWarning"
BackgroundCssClass="modalBackground">
</ajax:ModalPopupExtender>
<asp:Button runat="server" ID="btnHiddenConfirmExitWarning" Style="display: none" />
<asp:Panel ID="panelConfirmExitWarning" runat="server" Style="display: none" CssClass="ModalWindow">
<div class="window_header">
<span id="spanSubscirptionWindowHeader" runat="server" />
</div>
<div class="window_body">
<img src="../Images/Icon_Warning_New.png" />
<span id="spanConfirmExitExpiryWarning" runat="server" />
</div>
<div class="window_footer" align="right">
<asp:Button ID="btnSave" runat="server" Text="<%$ Resources:DealerWebPortal, DWP_SPAN_Ribbon_Save %>"
OnClientClick="return saveFormAndClose();" CssClass="popUp_button" />
<asp:Button ID="btnDontSave" runat="server" Text="<%$ Resources:DealerWebPortal, DWP_BTN_Page_Home_DontSave %>"
OnClientClick="return closeForm();" CssClass="popUp_button" />
<asp:Button ID="btnCancel" runat="server" Text="<%$ Resources:DealerWebPortal, DWP_BTN_Page_DealerEmailSubscription_Cancel %>"
CssClass="popUp_button" />
</div>
</asp:Panel>
Button (to trigger modalpopupextender):
<a id="lnkClose" class="close" runat="server" onclick="isCurrentPortalFormSaveClicked=true;return confirmExit(SaveNewNotes,null);"> </a>
Repeater:
<asp:Repeater runat="server" ID="rptrCaseNotes" OnItemCommand="rptrCaseNotes_ItemCommand">
<FooterTemplate>
<table>
<tr style="width: 650px">
<td style="vertical-align: middle; width: 50px">
<asp:ImageButton ID="AddNote" Width="16px" Height="16px" ImageUrl="~/Images/112_Plus_Blue_32x32_72.jpg"
runat="server" CommandName="Add" OnClick="OnAddNotes" OnClientClick="isCurrentPortalFormSaveClicked=true" CssClass="saveNotes" />
</td>
<td style="width: 600px">
<asp:TextBox runat="server" ID="NewNotes" Rows="6" Width="600px" Height="80px" TextMode="MultiLine"
MaxLength="2000" CssClass="newNote" />
</td>
</tr>
</table>
</FooterTemplate>

JS function is not called inside a form

I am new to JS. can u find me the problem and suggest thereby?? Js client side validation is not called. I have server side validation too. by clicking the button only the server side validation is being called. can u guys help?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Users.aspx.cs" Inherits="JSApp.Users" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JsApp</title>
<script type="text/javascript">
function ValidatingForm() {
var b = true;
if (document.getElementById("FnTextBox").valueOf == "") {
document.getElementById("Label4").innerText = "beshi Required";
b = false;
} else {
document.getElementById("Label4").innerText = "";
}
if (document.getElementById("LnTextBox").valueOf == "") {
document.getElementById("Label5").innerText = "koravabe required";
b = false;
} else {
document.getElementById("Label5").innerText = "";
}
if (document.getElementById("EmailTextBox").valueOf == "") {
document.getElementById("Label6").innerText = "ajeeb vabe required";
b = false;
} else {
document.getElementById("Label6").innerText = "";
}
return b;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="FN"></asp:Label>
<asp:TextBox ID="FnTextBox" runat="server"></asp:TextBox>
<asp:Label ID="Label4" runat="server"></asp:Label>
<br />
<br />
<asp:Label ID="Label2" runat="server" Text="LN"></asp:Label>
<asp:TextBox ID="LnTextBox" runat="server"></asp:TextBox>
<asp:Label ID="Label5" runat="server"></asp:Label>
<br />
<br />
<asp:Label ID="Label3" runat="server" Text="Email"></asp:Label>
<asp:TextBox ID="EmailTextBox" runat="server"></asp:TextBox>
<asp:Label ID="Label6" runat="server"></asp:Label>
<br />
<br />
<asp:Button ID="sendButton" runat="server" OnClick="sendButton_Click" OnClientClick="return ValidatingForm()" Text="Send" />
</div>
</form>
</body>
</html>
aspx.cs:server side
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace JSApp
{
public partial class Users : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void sendButton_Click(object sender, EventArgs e)
{
if (ValidateForm())
{
SaveData();
}
}
private void SaveData()
{
string cs = ConfigurationManager.ConnectionStrings["SampleConnection"].ConnectionString;
SqlConnection connection=new SqlConnection(cs);
SqlCommand cmd = new SqlCommand("spInsertUsers",connection);
cmd.CommandType = CommandType.StoredProcedure;
SqlParameter fnParameter=new SqlParameter("#fn",FnTextBox.Text);
SqlParameter lnParameter=new SqlParameter("#ln",LnTextBox.Text);
SqlParameter emailParameter=new SqlParameter("#email",EmailTextBox.Text);
cmd.Parameters.Add(fnParameter);
cmd.Parameters.Add(lnParameter);
cmd.Parameters.Add(emailParameter);
connection.Open();
cmd.ExecuteNonQuery();
connection.Close();
}
private bool ValidateForm()
{
bool b = true;
if (string.IsNullOrEmpty(FnTextBox.Text))
{
b = false;
Label4.Text = "Required";
}
else
{
Label4.Text = string.Empty;
}
if (string.IsNullOrEmpty(LnTextBox.Text))
{
b = false;
Label5.Text = "Required";
}
else
{
Label5.Text = "";
}
if (string.IsNullOrEmpty(EmailTextBox.Text))
{
b = false;
Label6.Text = "Required";
}
else
{
Label6.Text = "";
}
return b;
}
}
}

Try change your button click from:
<asp:Button ID="sendButton" runat="server" OnClick="sendButton_Click" OnClientClick="return ValidatingForm()" Text="Send" />
to:
<asp:Button ID="sendButton" runat="server" OnClick="sendButton_Click" OnClientClick="return ValidatingForm" Text="Send" />
See same issue here:
http://forums.asp.net/t/1069601.aspx?I+want+to+use+onsubmit+asp+net+wont+let+me+

That looks more or less correct. I would try the following:
Add a semicolon to your OnClientClick handler - i.e. "OnClientClick="return ValidatingForm();"
Put a javascript alert inside ValidatingForm (to ensure that it's actually called)
Check your comparison logic, maybe instead of: document.getElementById("FnTextBox").valueOf == ""
how about trying:
document.getElementById("FnTextBox").value.length == 0

innerscript attribute does not have cross browser compatibility. using textContent had solved the issue. when i use innerscript it runs ok in IE and Chrome but does not run in Firefox. that matter i posted as the problem.

Radcombobox hide and display using javascript

I have a div2 which I will show only when RadioButtonList1 value is "Yes" in div1 through javascript function getvalue().Initially I am not showing div2 using c# code.
<fieldset id="disc" class="nt_generic">
<div runat="server" id="div1">
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal"
OnClick="getvalue()">
<asp:ListItem Value="Yes" Text="Yes" />
<asp:ListItem Value="No" Text="No" Selected="True" />
</asp:RadioButtonList>
</div>
<div id="div2" runat="server">
<radC:RadComboBox ID="rcb1" EnableLoadOnDemand="true" runat="server" Skin="WebBlue">
<Items>
<radC:RadComboBoxItem ID="CondoComboBoxItem" runat="server" Text="A Ground" Value="B" Selected="true" />
<radC:RadComboBoxItem ID="HomeComboBoxItem" runat="server" Text="B Ground" Value="A" />
</Items>
</radC:RadComboBox>
</div>
</fieldset>
function getvalue()
{
var value = $('#<%=RadioButtonList1.ClientID %> input[type=radio]:checked').val();
if(value == "Yes")
{
if (document.getElementById("<% = div2.ClientID %>") != null)
document.getElementById("<%= div2.ClientID %>").style.display = "inline-block";
}
else
if (document.getElementById("<% = div2.ClientID %>") != null)
document.getElementById("<%= div2.ClientID %>").style.display = "none";
}
when I am using the above code as explained the div2 is displaying first and hiding afterwords which i don't want that.
If i add visible=false to div2 like below
<div id="divTankLocated" runat="server" visible="false">
There is no hide and display of div2, but javascript function getvalue() is not working, and can't display div2 on change of RadioButtonList1 value.
can some body help me in coming across the above 2 points?

At least part of your problem is due to javascript's automatic semicolon insertion.
ex this:
if(value == "Yes")
{
}
is turned into:
ex this:
if(value == "Yes");
{
}
which means that the then section of your if statement is executed every time. In order to prevent it, you have to put your opening {'s on the previous line. Doing that and adding { } pairs to all of your other if statements turns your javascript into this:
function getvalue() {
var value = $('#<%=RadioButtonList1.ClientID %> input[type=radio]:checked').val();
if(value == "Yes") {
if (document.getElementById("<% = div2.ClientID %>") != null) {
document.getElementById("<%= div2.ClientID %>").style.display = "inline-block";
}
} else if (document.getElementById("<% = div2.ClientID %>") != null) {
document.getElementById("<%= div2.ClientID %>").style.display = "none";
}
}

Validation Group of many ASPxTextBox in the same time

I am validating some .net textboxes in javascript on focusout via regular expression:
ValidationExpression="[0-9]+(\.[0-9][0-9]?)?"
for all text boxes.
If isValidate, button enabled = true else button enabled = false
but my code doesn't work:
<dx:ASPxTextBox ID="tbxAcPart" runat="server" Width="95px" ClientIDMode="Static">
<ClientSideEvents Validation="function(s, e) {ValidTextBox(s);}" />
<ValidationSettings ErrorDisplayMode="Text" EnableCustomValidation="true" SetFocusOnError="true" ValidationGroup="Apply" Display="Dynamic" ErrorTextPosition="Bottom" >
<ErrorFrameStyle Font-Size="Smaller"/>
<RegularExpression ValidationExpression="[0-9]+(\.[0-9][0-9]?)?" ErrorText="Numeric !" />
<RequiredField IsRequired="true" />
</ValidationSettings>
</dx:ASPxTextBox>
<dx:ASPxTextBox ID="tbxMpPart" runat="server" Width="95px" ClientIDMode="Static">
<ClientSideEvents Validation="function(s, e) {ValidTextBox(s);}" />
<ValidationSettings ErrorDisplayMode="Text" EnableCustomValidation="true" SetFocusOnError="true" ValidationGroup="Apply" Display="Dynamic" ErrorTextPosition="Bottom" >
<ErrorFrameStyle Font-Size="Smaller"/>
<RegularExpression ValidationExpression="[0-9]+(\.[0-9][0-9]?)?" ErrorText="Numeric !" />
<RequiredField IsRequired="true" />
</ValidationSettings>
</dx:ASPxTextBox>
function ValidTextBox(s) {
if (s.GetIsValid()) {
decimalErr.SetText('');
}
else {
decimalErr.SetText(s.GetErrorText());
var t = document.getElementsById("btApply");
t.disabled = true;
this.focus();
}
}

If you use server control you need to use ctl.ClientID
function ValidTextBox(s) {
if (s.GetIsValid()) {
decimalErr.SetText('');
}
else {
decimalErr.SetText(s.GetErrorText());
var t = document.getElementById("<%= btApply.ClientID %>");
t.disabled = true;
this.focus
}
}