Javascript Focus Is Not Working on Aspx Page - javascript

Hy Guys,
Please Look at the code and Try to Help Out. The function ive written is not working but its RUNNING properly. Its about To set focus on next content on page im using it on an ASPX page. Heres my code Below :
function SetFocusOnSave(CTag,NTag)
{
alert('Running'+CTag+NTag);
var CurrentTag=document.getElementById(CTag);
var NextTag = document.getElementById(NTag);
if ( (event.keyCode==13)||(event.keyCode==9) )
{
if(CurrentTag.value=="")
{
alert("Please Enter Detail First");
CurrentTag.focus();
}
if(CurrentTag.value!="")
{
event.returnValue=true;
document.getElementById(NextTag).focus();
}
}
}
snametxt.Attributes.Add("onkeypress",
SetFocusOnSave('<%=snametxt.ClientID%>','<%=sdesctxt.ClientID%>');");

have you tried to replace
document.getElementById(NextTag).focus();
with
NextTag.focus();
?

You have to add return false; after you found the false in validation otherwise the flow will continue till end.
Try this function:
function SetFocusOnSave(CTag, NTag) {
alert('Running' + CTag + NTag);
var CurrentTag = document.getElementById(CTag);
var NextTag = document.getElementById(NTag);
if ((event.keyCode == 13) || (event.keyCode == 9))
{
if (CurrentTag.value == "")
{
alert("Please Enter Detail First");
CurrentTag.focus();
return false;
}
if (CurrentTag.value != "") {
event.returnValue = true;
NextTag.focus();
return false;
}
}
};

Hy Guys Ive Tried A NEW CODE AND Fortunately Its Working Fine Here its my Code
function Navigation(CTag, NTag, Number) {
var CurrentTag = document.getElementById(CTag);
var NextTag = document.getElementById(NTag);
var IsNumber = Number; //Checking if value is number
if (NextTag.disabled == true) {
NextTag.disabled = false;
NextTag.className = "txt";
}
if (event.keyCode == 9) {
CurrentTag.focus();
event.returnvalue = false;
}
if (event.keyCode != 9) {
if (event.keyCode == 13) {
if (IsNumber == "Y") {
if (NextTag.disabled == true) {
NextTag.disabled = false;
}
if (CurrentTag.value != "") {
NextTag.focus();
event.returnvalue = true;
}
if (CurrentTag.value == "") {
alert('Please Enter Value To Proceed Further.');
CurrentTag.focus();
event.returnvalue = false;
}
if (isNaN(CurrentTag.value)) {
alert("Please Enter A Valid Number");
CurrentTag.value = "";
CurrentTag.focus();
}
}
if (IsNumber == "N") {
if (CurrentTag.value == "") {
alert('Please Enter Value To Proceed Further.');
CurrentTag.focus();
event.returnvalue = false;
}
if (CurrentTag.value != "") {
NextTag.focus();
event.returnvalue = true;
}
}
}
}
};
Thanks ya'll !! :)

Related

Boolean value doesnt change

My JS code:
var name_valid = false;
$("#InputName").blur( function(){
if ($(this).val() != ""){
name_valid = true;
} else {
name_valid = false;
}
});
if (name_valid === true){
alert('ok');
}
console.log(name_valid);
I don't actually understand why my code is not working.
If my <input> is not empty I have to get alert ('ok'), but I don't get anything.
Why my boolean value is still false at the end?
Because it's a callback function, which executes only after the blur function is complete. This means that this line if (name_valid === true) is executing before this line if ($(this).val() != "").
Try changing your code to this:
var name_valid = false;
$("#InputName").blur( function(){
if ($(this).val() != ""){
name_valid = true;
} else {
name_valid = false;
}
if (name_valid === true){
alert('ok');
}
console.log(name_valid);
});
You made a little mistake, you should put your last if statement inside callback function, like below:
var name_valid = false;
$("#InputName").blur(function () {
if ($(this).val() !== "") {
name_valid = true;
} else {
name_valid = false;
}
if (name_valid === true) {
alert('ok');
}
console.log(name_valid);
});
Your conditional only runs on page load. You want it inside the event handler so it runs when the event actually gets triggered
var name_valid = false;
$("#InputName").blur(function() {
if ($(this).val() != "") {
name_valid = true;
} else {
name_valid = false;
}
if (name_valid === true) {
alert('ok');
}
console.log(name_valid);
});
var name_valid = false;
$("#InputName").blur( function(){
if ($(this).val() !== ""){
name_valid = true;
}
if (name_valid === true){
alert('ok');
}
console.log(name_valid);
});
Please try this.
$(document).ready(function () {
var name_valid;
$("input").blur(function () {
if ($(this).val() != "") {
name_valid = true;
} else {
name_valid = false;
}
if (name_valid) {
alert('ok');
}
});
});

Force input pattern with only letter [duplicate]

This question already has answers here:
How do I make an input field accept only letters in javaScript?
(5 answers)
Closed 6 years ago.
I need a function that forces an input type with only letter, number is not allowed. I still have this function and i want to add this new function. Can you please help me?
<script>
function valida() {
if ($('#cut').val() == '') {
alert("u must insert something");
$('#cut').addClass("ui-state-error");
return false;
}
if ($('#tas').val() == '') {
alert(u must insert something");
$('#tas').addClass("ui-state-error");
return false;
}
if ($('#nom').val() == '') {
alert("u must insert something");
$('#nom').addClass("ui-state-error");
return false;
}
}
</script>
Try below code. checkAlphabets() will check either entered value is alfabates or not
<script>
function checkAlphabets(e) {
try {
if (window.event) {
var charCode = window.event.keyCode;
}
else if (e) {
var charCode = e.which;
} else {
return true;
}
if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123))
return true;
else
return false;
}
catch (err) {
alert(err.Description);
}
}
function validate() {
if ($('#cut').val() == '') {
alert("u must insert something");
$('#cut').addClass("ui-state-error");
return false;
}
if ($('#tas').val() == '') {
alert(u must insert something");
$('#tas').addClass("ui-state-error");
return false;
}
if ($('#nom').val() == '') {
alert("u must insert something");
$('#nom').addClass("ui-state-error");
return false;
}
if (checkAlphabets($('#nom').val()) == false) {
alert("u must insert something");
$('#nom').addClass("ui-state-error");
return false;
}
}
</script>
Ref: Link

Showing multiple validation alert on button click

I have written a Jquery code for validation. But the problem here is that, First the regular expression message fires and after that requiredField error message fires.
Here is my code:-
var ErrArr = [];
$(document).ready(function () {
$('#btnSave').click(function (e) {
e.preventDefault();
validateTextBoxes();
function FunValidatePan()
if (ErrArr.length > 0)
{
alert(ErrArr.join("\n"));
ErrArr = [];
return false;
}
});
function validateTextBoxes() {
if ($("#txtPanNo").val() === "") {
ErrArr.push('Pan No is required');
}
}
function FunValidatePan() {
var StrPriError = "";
if (Trim(document.getElementById("txtPanNo").value) != "" && Trim(document.getElementById("txtPanNo").value) != "NULL") {
var fil = /^[a-zA-Z0-9]+$/;
if (fil.test(document.getElementById("txtPanNo").value)) {
var abc = Trim(document.getElementById("txtPanNo").value);
if (abc.length != 10) {
StrPriError += ' Enter valid PAN Card\n';
}
}
else {
StrPriError += ' Enter valid PAN Card\n';
}
}
if (StrPriError != "") {
alert(StrPriError);
return false;
}
else {
return true;
}
}
I want that in single message. How to achieve that. Please suggest. Also I want that in Jquery
UPDATE
ASPX
<asp:TextBox ID="txtPanNo" runat="server" Width="100" MaxLength="10"></asp:TextBox>
Please check changes in the above code.
var ErrArr = [];
$(document).ready(function () {
$('#btnSave').click(function (e) {
e.preventDefault();
validateTextBoxes();
FunValidatePan();
if (ErrArr.length > 0)
{
alert(ErrArr.join("\n"));
ErrArr = [];
return false;
}
});
function validateTextBoxes() {
if ($("#txtPanNo").val() === "") {
ErrArr.push('Pan No is required');
}
}
function FunValidatePan() {
if (Trim(document.getElementById("txtPanNo").value) != "" && Trim(document.getElementById("txtPanNo").value) != "NULL") {
var fil = /^[a-zA-Z0-9]+$/;
if (fil.test(document.getElementById("txtPanNo").value)) {
var abc = Trim(document.getElementById("txtPanNo").value);
if (abc.length != 10) {
ErrArr.push('Enter valid PAN Card');
}
}
else {
ErrArr.push('Enter valid PAN Card');
}
}
}

Getting a form element to enter only at 11 characters

Right now i have it to tab on enter but i would like to get it to ONLY enter the element when there is 11 characters. How would i do it?
function getNextElement(field) {
var form = field.form;
for ( var e = 0; e < form.elements.length; e++) {
if (field == form.elements[e]) {
break;
}
}
return form.elements[++e % form.elements.length];
}
function tabOnEnter(field, evt) {
if (evt.keyCode === 13) {
if (evt.preventDefault) {
evt.preventDefault();
} else if (evt.stopPropagation) {
evt.stopPropagation();
} else {
evt.returnValue = false;
}
getNextElement(field).focus();
return false;
} else {
return true;
}
}
Maybe just something simple like that:
if(field.value.length === 11)
getNextElement(field).focus();

jQuery not returning any value

I have some code that checks if the contents of the form is valid. checkEmpty, checkNumeric and checkEmail is working fine if i comment out the checkFile function. But if I include checkFile, it breaks the code causing the function not to return any value.
Here is the checkFile function. It's supposed to check the file extension.
$.fn.checkFile = function(fileValue) {
//var fileName = contactform.cv.value;
var extension = fileValue.substring(fileValue.lastIndexOf('.') + 1);
alert(extension);
if(extension === 'jpg' || extension === 'jpeg' ||extension === 'docx' ||extension === 'pdf' ||extension === 'xlsx'){
alert("correct extension");
return true;
}else{
alert("incorrect extension");
return false;
}
};
Also the function should be working fine. I tried it seperately to see if it gets the extension properly.
Here is the whole code in case its needed
$(window).load(function() {
// validations
$.fn.checkEmpty = function(emp) {
if(emp === ""){
alert("field is empty");
return false;
}else{
alert("not empty");
return true;
}
};
$.fn.checkEmail = function(email) {
var regex = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(#\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
if(regex.test(email)){
alert("mail is valid");
return true;
} else {
alert("mail is invalid");
return false;
}
};
$.fn.checkNumeric = function(value) {
// 10 digits for phone number ?
/*
if (value.length !== 10 || value === "" || !$.isNumeric(value)) {
alert("not a numerical value");
} else {
alert("numerical value");
}*/
var regex =new RegExp(/^(?:\d*\,\d*|\d+)$/);
if(regex.test(value) && value!==""){
alert("numerical value");
return true;
} else {
alert("not numerical value");
return false;
}
};
$.fn.checkFile = function(fileValue) {
//var fileName = contactform.cv.value;
var extension = fileValue.substring(fileValue.lastIndexOf('.') + 1);
alert(extension);
if(extension === 'jpg' || extension === 'jpeg' ||extension === 'docx' ||extension === 'pdf' ||extension === 'xlsx'){
alert("correct extension");
return true;
}else{
alert("incorrect extension");
return false;
}
};
$.fn.checkField = function() {
var empty = "empty";
var numeric = "numeric";
var email = "email";
var file = "file";
var flag=0;
var retval;
$("input:text").each(function() {
var required = $(this).data("reqs");
if(required.toLowerCase().indexOf(empty) !== -1){
retval = $(this).checkEmpty($(this).val());
if(retval === false){
flag++;
$(this).after('<span style="color:red">*</span>');
}
}
if (required.toLowerCase().indexOf(numeric) !== -1){
retval = $(this).checkNumeric($(this).val());
if(retval === false){
flag++;
$(this).after('<span style="color:red">*</span>');
}
}
if(required.toLowerCase().indexOf(email) !== -1){
retval = $(this).checkEmail($(this).val());
if(retval === false){
flag++;
$(this).after('<span style="color:red">*</span>');
}
}
});
$("input:file").each(function() {
if(required.toLowerCase().indexOf(file) !== -1){
retval = $(this).checkFile($(this).val());
if(retval === false){
flag++;
$(this).after('<span style="color:red">*</span>');
}
}
});
alert(flag);
return (flag > 0) ? false : true;
};
});
Thanks for any help.
As Bergi pointed it out, it doesn't make much sense to add the function to the prototype if you pass it the filename as a parameter...
However, adding it to the prototype can be a good idea if you actually use this within the method:
$.fn.checkFile = function(){
var filename = $(this).val();
if (/(?:jpe?g|docx|pdf|xlsx)$/.test(filename)){
return true;
}else{
return false;
}
};
You can test this method at http://jsfiddle.net/NVvzN/. Try choosing different files from your computer to see how it works.
PS: my guess is, if you accept .docx and .xlsx, you should also accept .doc and .xls; in that case, the regular expression would be /(?:jpe?g|docx?|pdf|xlsx?)$/

Categories

Resources