Validation Group of many ASPxTextBox in the same time - javascript

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
}
}

Related

UserControl CustomValidator calling external Javascript

I have a User Control with a Datagrid. I need to check some Textboxes within by calling my Javascript File doing the compare when the user will Save its modifications. (it will trigger my validator, if it is wrong a popup will show)
My ASPX:
<script type="text/javascript" src='/scripts/production_cost.js'></script>
<ContentTemplate>
<asp:DataGrid ID="ProdCostGrid" runat="server" AutoGenerateColumns="False" BorderColor="#f0f0f0" BorderStyle="None" BorderWidth="0px" CellPadding="0">
<HeaderStyle HorizontalAlign="Center"></HeaderStyle>
<Columns>
<asp:BoundColumn Visible="False" DataField="Id" HeaderText="Id"></asp:BoundColumn>
<asp:TemplateColumn>
<ItemTemplate>
Amount: <asp:TextBox ID="ProductionCostLineField" Text='<%# ToText(Eval("ProductionCostEuro")) %>'
TabIndex="24" runat="server" Width="80px" MaxLength="13"></asp:TextBox> EUR
</ItemTemplate>
<ItemStyle Width="170px" HorizontalAlign="Right"></ItemStyle>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
//here I am suppose to put my Validator
<asp:CustomValidator ID="AmountCustomValidator" runat="server" Display="None" ErrorMessage="Amount must be filled" ClientValidationFunction="ValidateAmount" />
</ContentTemplate>
My Javascript in a different folder :
function ValidateAmount(source, args) {
args.IsValid = true;
$('input[id*="ProductionCostLineField"]').blur(function () {
var amount = this.value;
$('input[id*="ProductionCostInvoiceToLineField"]').each(function () {
var textInvoicedBy = this.value;
if (amount == '' || amount == '0') {
} else {
if (this.value != '' || amount == '' || amount == '0') {
args.IsValid = true;
}
if ((amount != '' || amount != '0') && textInvoicedBy == '') {
alert("You must inform the field 'Invoiced By'");
args.IsValid = false;
}
}
});
});
}

Javascript validation doesn't work when a wrong value entered before

Guys I have a form like this(an aspx page): http://prntscr.com/8tmvge . I wrote validations each of them,And it is working properly. If user enter numeric value in name textbox (ex),it gives error and I'm clearing that textbox(only that textbox) but enter the accurate value and pressing send button, none of the validations and click events doesn't triggered.I couldn't understand how can I fix this? code is below:
Ekle.aspx:
<form id="form1" runat="server">
<div id="ekle">
<asp:Table ID="Table1" runat="server">
<asp:TableRow ID="TableRow1" runat="server">
<asp:TableCell>Id:</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="txt1" runat="server" ></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txt1" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow2" runat="server">
<asp:TableCell>Name:</asp:TableCell><asp:TableCell>
<asp:TextBox ID="txt2" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txt2" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow3" runat="server">
<asp:TableCell>Surname:</asp:TableCell><asp:TableCell>
<asp:TextBox ID="txt3" runat="server"/>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txt3" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow4" runat="server">
<asp:TableCell>Sex:</asp:TableCell>
<asp:TableCell>
<span id="spanddl">
<asp:DropDownList ID="ddl1" runat="server">
<asp:ListItem Value="Bay">Bay</asp:ListItem>
<asp:ListItem Value="Bayan">Bayan</asp:ListItem>
</asp:DropDownList>
</span>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow5" runat="server">
<asp:TableCell>Email:</asp:TableCell><asp:TableCell>
<asp:TextBox ID="txt5" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txt5" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow6" runat="server">
<asp:TableCell>City:</asp:TableCell><asp:TableCell>
<asp:TextBox ID="txt6" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="txt6" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow7" runat="server">
<asp:TableCell>Age:</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="txt7" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ControlToValidate="txt7" />
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<input id="ekle_gonder" type="button" value="Gönder" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</div>
</form>
ekle.js :
$(document).ready(function () {
var result = 1;
var id, name, surname, email, city, age;
$("#content").on('click', "#ekle_gonder", function (e) {
var gender = $("#ddl1 option:selected").text();
//var gender = document.getElementById('<%= ddl1.ClientID%>');
//var gender2 = gender.options[gender.selectedIndex].value;
check();
var obj = {};
obj.Id = id;
obj.Name = name;
obj.Surname = surname;
obj.Sex = gender;
obj.Email = email;
obj.City = city;
obj.Age = age;
if (result == 1) {
$.ajax({
type: "post",
url: "ShowRecord.aspx/ekle_func",
contentType: "application/json;charset:utf-8",
data: JSON.stringify(obj),
dataType: "json",
success: onSuccess,
error: function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
//complete:printAgain()
});
}
});
function check() {
var mailregex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
var textregex = /^[A-Za-z çğıöşü]{1,25}$/;
var numregex = /(^\d+$)/;
id = $("#txt1").val();
name = $("#txt2").val();
surname = $("#txt3").val();
email = $("#txt5").val();
city = $("#txt6").val();
age = $("#txt7").val();
if ((numregex.test(parseInt(id)) == false) || (parseInt(id) < 0)) {
open_error_box("#ekle_id_error", "#txt1");
}
if ((name == '') || (textregex.test(name) == false)) {
open_error_box("#ekle_name_error", "#txt2");
}
if ((surname == '') || (textregex.test(surname) == false)) {
open_error_box("#ekle_surname_error", "#txt3");
}
if ((email == '') || (mailregex.test(email) == false)) {
open_error_box("#ekle_email_error", "#txt5");
}
if ((city == '') || (textregex.test(city) == false)) {
open_error_box("#ekle_city_error", "#txt6");
}
if ((numregex.test(parseInt(age)) == false) || (parseInt(age) < 0) || (parseInt(age) > 100)) {
open_error_box("#ekle_age_error", "#txt7");
}
return result;
}
function open_error_box(error_name, name) {
$(error_name).dialog("open");
$(name).val('');
result = 0;
}
function onSuccess() {
$("#txt1").val('');
$("#txt2").val('');
$("#txt3").val('');
$("#txt4").val('');
$("#txt5").val('');
$("#txt6").val('');
$("#txt7").val('');
}
$(function () {
$("#ekle").dialog();
$("#ekle_id_error ,#ekle_name_error, #ekle_surname_error, #ekle_email_error, #ekle_city_error, #ekle_age_error").dialog(
{
autoOpen: false,
buttons: [{
text: "OK",
click: function () { $(this).dialog("close"); }
}]
});
});
});
By the way the id='content' selector is in another page.I'm loading Ekle.aspx into a div(in ShowRecord.aspx) when pressed 'ekle' button(inside ShowRecord.aspx again).ANd error dialog boxes are in ShowRecord.aspx also.
When you clear the textbox, you should change the result value as 1. Your result value just set as 1, when the document is ready. However, if there is something is wrong, you set it as 0, then you never change it as 1.

Check a checkbox on Full Gridview row click using Javascript in ASP.NET using C#

I am able to check a column of checkbox when I click the gridview row, however it limits only to a particluar column, when I click on the column of the checkbox, it it is not wkorking.
Here's the case, When I click the any where on this part, it worked well. the checkbox still checking.
but when I click on this part, it doesn't work already.
codes are here
$(document).ready(function () {
$('body').on('click', 'tr.dataRow', function () {
var checked = $(this).find('input[id*=chkBusinessSelected]').prop('checked');
$(this).find('input[id*=chkBusinessSelected]').prop('checked', !checked);
});
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
$('body').on('click', 'tr.dataRow', function () {
var checked = $(this).find('input[id*=chkBusinessSelected]').prop('checked');
$(this).find('input[id*=chkBusinessSelected]').prop('checked', !checked);
});
});
<asp:GridView ID="grdBusiness" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Vertical" Width="420px" ShowHeaderWhenEmpty="True" EmptyDataText="No records Found" OnRowDataBound="grdBusiness_RowDataBound" DataSourceID="SqlDataSource3" >
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkBusinessSelected" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Code" HeaderText="Code" SortExpression="Code" />
<asp:BoundField DataField="Business Type" HeaderText="Business Type" SortExpression="Business Type" />
</Columns>
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#90FF90" Font-Bold="True" ForeColor="Black" />
<SortedAscendingCellStyle BackColor="#FBFBF2" />
<SortedAscendingHeaderStyle BackColor="#848384" />
<SortedDescendingCellStyle BackColor="#EAEAD3" />
<SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>
protected void grdBusiness_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.CssClass = "dataRow";
}
}
I am edited #UsmanKhalid 's answer and it worked for me:
$(function () {
$("#<%=grdBusiness.ClientID %> td").click(function () {
selectRow($(this).closest("tr"));
});
});
function selectRow(row) {
var firstInput = row[0].getElementsByTagName('input')[0];
firstInput.checked = !firstInput.checked;
}
Try this code:
$(function () {
$("[id*=GridView] td").click(function () {
selectRow($(this).closest("tr"));
});
});
function selectRow(row)
{
var firstInput = row.getElementsByTagName('input')[0];
firstInput.checked = !firstInput.checked;
}
Try the following
$('tr.dataRow').click(function(){
var chkBox = $(this).find('input[type=checkbox]');
chkBox.prop("checked", !chkBox.prop("checked"));
});

How to set grid combo box value in javascript?

I have combobox in grid itemtemplate how can i set the value in javascript
<telerik:GridTemplateColumn AutoPostBackOnFilter="true"
CurrentFilterFunction="Contains" DataField="FAULT" FilterControlWidth="100%"
HeaderStyle-Width="80px" HeaderText="Fault" ReadOnly="true" ShowFilterIcon="false"
SortExpression="FAULT" UniqueName="FAULT">
<ItemTemplate>
<telerik:RadComboBox ID="cmbFault" runat="server" AllowCustomText="false" HighlightTemplatedItems="true"
Skin="Outlook" Visible="true" Width="70px">
<Items>
<telerik:RadComboBoxItem runat="server" Text="NF" Value="N" />
<telerik:RadComboBoxItem runat="server" Text="VF" Value="V" />
<telerik:RadComboBoxItem runat="server" Text="CF" Value="C" />
<telerik:RadComboBoxItem runat="server" Text="DF" Value="D" />
</Items>
</telerik:RadComboBox>
</ItemTemplate>
<HeaderStyle Width="80px" />
</telerik:GridTemplateColumn>
My java script
function vishali(){
if (difference > 5) {alert("enter into if");
document.getElementById('<%=cmbFault.ClientID %>').value = 'C';
}
else {
alert("enter into else");
document.getElementById('<%=cmbFault.ClientID %>').value = 'S';
}
}
but it is not working it is saying that cmbFault is not found in the context error please help me on this
You can do below javascript code in order to set from javascript.
function setCombo() {
var combo = $find("<%= cmbFault.ClientID %>");
combo.set_text("S");
}
And also you can have a look http://www.telerik.com/help/aspnet-ajax/combobox-client-side-radcombobox.html
To get the control inside GridTemplateColumn do the following.
JS:
function setCombo() {
var grid = $find("<%=RadGrid1.ClientID%>");
var tableView = grid.get_masterTableView();
var items = tableView.get_dataItems();
for(var i = 0; i<items.length; i++){
var rowValues = items[i];
var Textvalue=rowValues.findElement("cmbFault");//access Combobox
}
}

Parent Window is not getting disabled in asp.net web page via javascript

I want to open a popup window and disable the parent window. Below is the code that I am using.For some reason, the parent window does not get disabled. Do I need some additional code OR what is the case?I also want to gray out the parent page while it is disabled so help me in this also.
<script type="text/javascript">
var popupWindow = null;
function OpenPopup() {
popupWindow = window.open("ClockPopUP.aspx", "Time", "scrollbars=no,resizable=no,width=550,height=350,left=300,top=300");
return false;
}
function parent_disable() {
if (popupWindow && !popupWindow.closed)
popupWindow.focus();
document.onmousedown = focusPopup;
document.onkeyup = focusPopup;
document.onmousemove = focusPopup;
}
function focusPopup() {
if (popupWindow && !popupWindow.closed) { popupWindow.focus(); }
}
function CheckDateEalier(sender, args)
{
var toDate = new Date();
toDate.setMinutes(0);
toDate.setSeconds(0);
toDate.setHours(0);
toDate.setMilliseconds(0);
if (sender._selectedDate < toDate)
{
alert("You can't select day earlier than today! In Case if you are selecting Previous date then, By default it will take current Date.");
sender._selectedDate = toDate;
//set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
if (sender._selectedDate > toDate)
{
document.getElementById('<%= txtTimeSpent.ClientID%>').disabled = false;
}
}
<asp:Content ID="Content1" ContentPlaceHolderID="cphTop" runat="server" >
<asp:ScriptManager ID="ScriptManger1" runat="server">
<%--<Scripts>
<asp:ScriptReference Path="js/Progress.js"/>
</Scripts>--%>
</asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="updProduction">
<ContentTemplate>
<div id="counter" >
</div>
<div id="content">
<div id="right">
&nbsp
<asp:Button ID="Button1" runat="server" Text="Lunch" CausesValidation="false" CssClass="bigbuttons" style="background:url(../App_Themes/Images/green-box.gif)" Font-Bold="True" ForeColor="White" Font-Size="Large" /> <br />
<asp:Button ID="Button2" runat="server" Text="Break" CausesValidation="false" CssClass="bigbuttons" style="background:url(../App_Themes/Images/red-box.gif)" Font-Bold="True" ForeColor="White" Font-Size="Large" /> <br />
<asp:Button ID="Button3" runat="server" Text="L&D Training " CausesValidation="false" CssClass="bigbuttons" style="background:url(../App_Themes/Images/green-box.gif)" Font-Bold="True" ForeColor="White" Font-Size="Large" /> <br />
<asp:Button ID="Button4" runat="server" Text="Shift End" CausesValidation="false" CssClass="bigbuttons" style="background:url(../App_Themes/Images/red-box.gif)" Font-Bold="True" ForeColor="White" Font-Size="Large" /> <br />
</div>
</div>
You could create a div with grey semitransparent background that you position absolutely over the content of the parent window (using z-index). On this div you can then bind the onclick-event to focus the on the other window.
Something like this:
var disableDiv = document.createElement("div");
disableDiv.style.zIndex = 1000;
disableDiv.style.position="absolute";
disableDiv.style.width = "1024px"; //adjust this to your spec
disableDiv.style.height = "800px"; //adjust this to your spec
disableDiv.style.background = "rgba(100,100,100, .5)";
if(document.attachEvent){
disableDiv.attachEvent('onclick', function (e) {
//do IE stuff
})
}else{
disableDiv.addEventListener("click", function (e) {
//do stuff
}, false);
}
document.body.appendChild(disableDiv);

Categories