function validateForm()
{
var ddlTitle = document.getElementById('<%=ddlTitle.ClientID %>');
if (ddlTitle.value.replace(/^\s+|\s+$/, '').length < 1)
{
alert("Title should not be blank.");
ddlTitle.focus();//not working in mozilla but fine in IE and chrome
return false;
}
}
<asp:DropDownList ID="ddlTitle" runat="server" CssClass="csstextbox">
<asp:ListItem Value="">[Select]</asp:ListItem>
<asp:ListItem>Dr.</asp:ListItem>
<asp:ListItem>Dr.(Mrs.)</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btn" runat="server" CssClass="cssbutton" Text="Save" Width="60px"
OnClientClick="return validateForm();" />
This is HTML source
ddlTitle = document.getElementById('contentPlaceHolderMain_ddlTitle');
function validateForm()
{
if (ddlTitle.value.replace(/^\s+|\s+$/, '').length < 1)
{
alert("Title should not be blank.");
ddlTitle.focus();
return false;
}
}
Problem is only for dropdownlist works well for Textbox
Focus() must be setting focus try using your keyboard key Up/ down arrow and check.
Related
I am migrating my application from IE 9 to IE 11 with compatibility edge mode.
the asp custom validator and required field validator is not working in IE 11, but page.isValid() always returns true. but it works fine in IE 9.
Sample Code:
<asp:DropDownList ID="cboType" onChange="fnInvalid(this,'hidTypeValid');getSelectedValue('cboType','hidliab');changeOptions(document.forms[0].hidliab,document.forms[0].cmbLiability,document.forms[0].hid_liab,document.forms[0].HIDSERLIAB);" runat="server" name="cbotype"AutoPostBack="true"></asp:DropDownList>
<asp:RequiredFieldValidator ID="VreqvalidateType" runat="server" Display="None" ControlToValidate="cboType" ErrorMessage="-Case Type should not be blank" InitialValue="Choose"></asp:RequiredFieldValidator>
<asp:CustomValidator ClientValidationFunction="fnInvalidSelection" ID="VcustTypeValid"
runat="server" Display="None" ControlToValidate="cboType" ErrorMessage="-Case Type should have valid selection."></asp:CustomValidator>
<asp:CustomValidator ClientValidationFunction="fnTypeFileClass" ID="VcusTypeFile" runat="server" Display="None" ControlToValidate="cboType" ErrorMessage="- Case File Classification should not be empty."></asp:CustomValidator>
<asp:CustomValidator Enabled="false"ClientValidationFunction="fnTypeCaseHandler"ID="VcusTypeCaseHandler" runat="server" Display="None" ControlToValidate="cboType"ErrorMessage="- Case Handler 1 should not be empty."></asp:CustomValidator>
Javascript:
<pre lang="C#">function fnTypeCaseHandler(sender,args)
{
var s = args.Value;
args.IsValid = true;
if (s!="K")
{
var handler1= document.frmCaseDetails.cmbHandler1.value;
if (handler1 =="Choose")
{
args.IsValid = false;
}
}
return args.IsValid;
}
function fnTypeFileClass(sender,args)
{
var s = args.Value;
args.IsValid = true;
if (s!="K")
{
var file = document.frmCaseDetails.cmbFileClass.value;
if (file =="Choose")
{
args.IsValid = false;
}
}
return args.IsValid;
}
This is because of an IE-11 Issue we have made<meta> tag with IE-11 compatibility in header section of page its worked well.
i have gridview in my aspx page as
<asp:GridView ID="Grid_FeeCategory" Width="100%" CssClass="table table-striped responsive-utilities jambo_table" runat="server" AutoGenerateColumns="False">
<HeaderStyle CssClass="headings" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="checkAll" runat="server" onclick = "checkAll(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkRow" runat="server" onclick = "Check_Click(this)"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="CatName" HeaderText="Category" />
<asp:TemplateField HeaderText="Category Fee" HeaderStyle-Width="125px">
<ItemTemplate>
<asp:TextBox ID="txtCatFee" runat="server" placeholder="Int or Decimal" style="width:100%" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="FeeCatID" HeaderText="Category ID" HeaderStyle-CssClass="hidden-field" ItemStyle-CssClass="hidden-field"/>
</Columns>
</asp:GridView>
and my custom validator looks like
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Please enter value"
ClientValidationFunction="Validate" ForeColor="Red"></asp:CustomValidator>
i need to validate textbox in gridview when checkbox in the gridview is checked and user leave textbox empty
e-g if user check the checkbox from row 1 of gridview and also leave textbox empty in row 1 and so on.. then custom validator inform to enter value,
for this i got javascript yesterday from google and manipulate it but it does nothing and here is javascript
<script type="text/javascript">
function Validate(sender, args) {
var gridView = document.getElementById("<%=Grid_FeeCategory.ClientID %>");
var fields= gridView.getElementsByTagName("input");
for (var i = 0; i < fields.length; i++)
{
if (fields[i].type == "fields" && fields[i].checked)
{
if (fields[i].type == "text" && fields[i].value.length < 1)
{
args.IsValid = false;
return;
}
}
}
args.IsValid = true;
}
</script>
i check it by using alerts inside script and it cannot enter into this section of javascript
if (fields[i].type == "text" && fields[i].value.length < 1)
{
args.IsValid = false;
return;
}
It is requirement to do this at client side using javascript so i need your help to get out of it
i know this is late one but any one can get help from following function....
I have example related to your logic. you can do this on client side ...
following code is not exactly your requirement but you can manipulate it according to your requirement .
<script type="text/javascript">
function validate() {
var flag = false;
var gridView = document.getElementById('<%= Grid_FeeCategory.ClientID %>');
for (var i = 1; i < gridView.rows.length; i++) {
var inputs = gridView.rows[i].getElementsByTagName('input');
if (inputs != null && inputs.length > 1 && inputs[0] != null) {
if (inputs[1].type == "text" && inputs[0].type == "checkbox") {
var txtval = inputs[1].value;
if (inputs[0].checked && (txtval == "" || txtval == null)) {
flag = false;
break;
}
else {
flag = true
}
}
}
}
if (!flag) {
new PNotify({
title: 'Error',
text: 'Please provide values for "CHECKED" fee categories....!',
type: 'error',
hide: true
});
}
return flag;
}
</script>
and button where you can call above function
<asp:Button ID="btnCalculate" runat="server"OnClientClick="if(!validate()) { return false;}" OnClick="btnCalculate_Click" Text="Calculate" ValidationGroup="Update"/>
if you need any kind of query to understand then please feel free to ask
HTML :
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<asp:ListItem>C++</asp:ListItem>
<asp:ListItem>ASP.Net</asp:ListItem>
<asp:ListItem>Javascript</asp:ListItem>
<asp:ListItem>CSS</asp:ListItem>
<asp:ListItem>HTML</asp:ListItem>
<asp:ListItem>Java</asp:ListItem>
<asp:ListItem>Other</asp:ListItem>
</asp:CheckBoxList>
<div id="idskill">
<asp:Label ID="lblskilldescription" runat="server">Description</asp:Label>
<asp:TextBox ID="txbskilldescription" runat="server" Width="150px" OnTextChanged="TextBox8_TextChanged" Rows="5" TextMode="MultiLine"></asp:TextBox>
</div>
Scripts :
function toggleDiv()
{
$("#idskill").slideToggle("slow");
return false;
}
What I want is on selection Other div should toggle, on uncheck it should hide.
There should be "onchange" listener for the element. At least using JS we use the onchange event listener.
Try like this might help.
function list_onclick() {
var list = document.getElementById('CheckBoxList1');
var inputs = list.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked && inputs[i].value == "1") {
//do your work
}
else{
}
}
}
I tried this code for validating empty field,But it doesn't works properly when call javascript it does not focus on Textbox,and code will execute continues.
Html Code:
<asp:TextBox ID="txtholdername" runat="server" Width="60%"></asp:TextBox>
<asp:TextBox ID="txtusername" runat="server" Width="60%"></asp:TextBox>
<asp:ImageButton ID="btnsave" runat="server" OnClientClick="javascript:return validateRegistrationMaster();" ImageUrl="~/Images/save.png" />
Script
function IsBlank(obj) {
if (obj) {
if (!String.prototype.trim) { String.prototype.trim = function () { return this.replace(/^\s+|\s+$/g, ''); }; }
if ((obj.value.trim().length == 0) || (obj.value == null)) {
obj.focus();
return false;
}
return true;
}
}
function validateRegistrationMaster() {
var Holder_Name = document.getElementById('<%= txtholdername.ClientID %>');
var username = document.getElementById('<%= txtusername.ClientID %>');
if ((!IsBlank(Holder_Name))) {
Holder_Name.focus();
return false;
}
if ((!IsBlank(username))) {
username.focus();
return false;
} return true;
}
Use Required Field Validator instead of custom Javascript, while using Asp.Net Controls.
Example : Click Here W3 Schools Link
Code:
<asp:RequiredFieldValidator ControlToValidate="txtholdername" Text="The holder name field is required!"
runat="server" />
<asp:RequiredFieldValidator ControlToValidate="txtusername" Text="The user namefield is required!"
runat="server" />
I have a script in javascript that replace Enter with TAB key:
function ReplaceEnterWithTab() { if (event.keyCode == 13) event.keyCode = 9; return false; }
and I use it this way:
txt.Attributes.Add("OnKeyDown", "ReplaceEnterWithTab();");
this code work nice.Now I want to develop a script with jQuery that will not need to add OnKeyDown attribute.please consider this sample page:
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" CssClass="EntTab"></asp:TextBox>
<br />
<br />
<asp:TextBox ID="TextBox2" runat="server" CssClass="EntTab"></asp:TextBox>
<br />
<br />
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="EntTab">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</div>
</form>
I write this code :
$(document).ready(function () {
$('.EntTab').on('keydown', function (e) {
if (e.keyCode == 13) e.keyCode = 9;
});
});
the problem is when I press Enter key on TextBox1, Button1 cause page post back. How I can solve this issue?
thanks
Try:
$(document).ready(function () {
$(".EntTab").bind("keypress", function(e) {
if (e.keyCode == 13) {
var inps = $("input, select"); //add select too
for (var x = 0; x < inps.length; x++) {
if (inps[x] == this) {
while ((inps[x]).name == (inps[x + 1]).name) {
x++;
}
if ((x + 1) < inps.length) $(inps[x + 1]).focus();
}
} e.preventDefault();
}
});
});
Did you mean something like that.
You forgot to cancel the event propagation, add return false to the keydown callback:
$(document).ready(function () {
$('.EntTab').on('keydown', function (e) {
if (e.keyCode == 13) e.keyCode = 9;
return false;
});
});
Also, Button tag in ASP.NET has UseSubmitBehavior flag set to true by default, which causes the button to be rendered as input type="submit" tag. Try setting it to false, to get the behavior like described in the following answer: Use Javascript to change which submit is activated on enter key press