Avoid enter alpha charecters

​

$("#strPhone").keydown(function(event) { if ( event.keyCode == 46 || event.keyCode == 8 ) { } else { if (event.keyCode < 95) { if (event.keyCode < 48 || event.keyCode > 57 ) { event.preventDefault(); } } else { if (event.keyCode < 96 || event.keyCode > 105 ) { event.preventDefault(); } } } });

onkeypress should not accept alpha charecters

function functionAmount(e) { if (window.event) { code = event.keyCode; if ((code >= 48 && code <= 57) || code == 46) { } else { event.returnValue = false; } } else { code = e.which; if ((code >= 48 && code <= 57) || code == 8 || code == 0 || code == 46) { if (code >= 48 && code <= 57) { } } else { e.preventDefault(); } } }

Difference in CSS3 Transition - Ease-In-Out

ease-in will start the animation slowly, and finish at full speed.

ease-out will start the animation at full speed, then finish slowly.

ease-in-out will start slowly, be fastest at the middle of the animation, then finish slowly.

ease is like ease-in-out, except it starts slightly faster than it ends./p>

linear uses no easing.

Customized validation for text box based on drop down value

---------- Html -------------

Sale Tax Amount Validation Example

Payment Method -select- Credit Cardd Purchase Card

Sale Tax Amount

Tax Type Taxable Non Taxable Tax Exempt

-----End------------- --------------Jquery----------- $.validator.addMethod("taxAmount_validate", function(value, element) { var ddlTaxType= $('#ddlTaxType').val(); if (ddlTaxType== 0 || ddlTaxType== 2) { if (value == 0) { return true; } else { return false; } } if (ddlTaxType== 1) { if (value > 0) { return true; } else { return false; } } }); $("#taxForm").validate({ rules: { txtSaleTaxAmont: { required:function(element) {return $('#ddlPaymentMethod :selected').val()=='2' }, taxAmount_validate: { depends: function(element) {return $('#ddlPaymentMethod :selected').val()=='2' } } } }, messages: { txtSaleTaxAmont: { taxAmount_validate: function() { switch ($('#ddlTaxType').val()) { case '0': case '2': return "Sales Tax must be 0!"; break; case '1': return "Sales Tax must be more than 0!" break; } } } } }); -------------Jquery End---------------

Taxable Field Validation

HTML -----------

Form Validation Example

Tax Type: Taxable Non Taxable Tax Exempt

Sale tax amount:

--------------- Jquery ------------------
$.validator.addMethod("taxAmount_validate", function(value, element, param) { var taxtype = $('#taxType').val(); if (taxtype >= 0) { if (taxtype == 0) { if (value <= 0) { return false; } else { return true; } } if (taxtype == 1 || taxtype == 2) { if (value != 0) { return false; } else { return true; } } } }); $("#taxForm").validate({ debug: true, //prevent submission for testing rules: { taxAmount: { taxAmount_validate: true } }, messages: { taxAmount: { taxAmount_validate: "Enter validate tax amount!." }, } });

Zip code accept only 5 or 9 digits

HTML

Jquerty

$.validator.addMethod('zipcode', function(postalcode,element){ return this.optional(element) || postalcode.match(/^\d{5}$|^\d{5}\-\d{4}$/) || postalcode.match(/^\d{9}$|^\d{9}\-\d{8}$/); },"Please enter 5 or 9 digits valid zip code");

jQuery(document).ready(function () { $("#mainForm").validate({ rules: { txtBillingInfoPostalCode:{zipcode:true} } }); });

Allow only numbers in textbox jquery on key press

HTML

​

Jquery

$("#num").keypress(function (e){ var charCode = (e.which) ? e.which : e.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } }); ​

tantrum - an occasion when someone suddenly behaves in a very angry and unreasonable way, often screaming, crying, or refusing to obey someone. This word is usually used about children have/throw a tantrum.
Example:Sudden instances of a particular emotion

wail - to shout or cry with a long high sound to show that you are in pain or are very sad
Example : The baby wailed all night.

doze off--to start to sleep, especially during the day and without intending to.
Example : I dozed off in front of the television.

mend----to do something to end an argument or disagreement

Example
The Secretary of State and Chinese Foreign Minister met in an attempt to mend strained relations.

Illusion

Illusion --- a false or wrong belief or idea, Something that is not real or true

Examples:

This description creates the illusion that we can solve all our environmental problems.

plunge ----to fall quickly from a high position

Example: His car had plunged off the mountain road in heavy rain.

Adjust width of input textbox

HTML

JavaScript

if(date.value.length <='20'){ / date.style.width = (date.value.length * 7.2) + "px"; return false; } if(date.value.length >='20'){ date.style.width = (date.value.length * 7.0) + "px"; return false; } return true;

Jquery date picker validation - bootstrap

$(function() { $(document.getElementById('<%=txtDate.ClientID%>')).datepicker({ dateFormat: 'dd/mm/yy', onSelect: function() {} }); });

OnClick not working when i use both Onclick & OnClientClick

Looks like you will have to add the UseSubmitBehavior = false

Reference from Sivasenthil

Jquery Lightbox Effect

CSS

---

#lightbox {

 display:none;

 background:#000000;

 opacity:0.9;

 filter:alpha(opacity=90);

 position:absolute;

 top:0px;

 left:0px;

 min-width:100%;

 min-height:100%;

 }

 #lightboxPanel {

 display:none;

 position:fixed;

 top:100px;

 left:50%;

 margin-left:-200px;

 width:400px;

 background:#FFFFFF;

 padding:10px 15px 10px 15px;

 border:2px solid #CCCCCC;

 z-index:2; }

Jquery

---

$('#ShowPanel').click(function(){

 $('#lightbox,#lightboxPanel').fadeIn(300);

 });

 $('#close').click(function(){

 $('#lightbox,#lightboxPanel').fadeOut(300);

 });

HTML

---------------------

Lightbox

Close

Tool tip Effect in Jquery

-------Html----------------

--------Html End--------------
------------Jquery----------------
$("input[type='button'].btnClear").after("

");
$('h6.toolTip').css({ font: 'bold 13px arial', width: '140px', padding: '10px 10px 20px 10px', top: '10px', right: '270px', position: 'absolute' }).hide();
$("input[type='button'].btnClear").hover(function () {
$('h6.toolTip').animate({
opacity: 'show', top: '-5px'
}, 'slow');
var toolTipTxt = $("input[type='button'].btnClear").attr('name');
$('h6.toolTip').text(toolTipTxt);
});
$("input[type='button'].btnClear").on('mouseout', function () {
$('h6.toolTip').animate({
opacity: 'hide', top: '10px'
}, 'slow');

});
---------Jquery End-------

JQuery Validate multiple fields with one error

----------HTML----------------

* Expiration
- Select - Jan Feb Mar Apr May June July Aug Sep Oct Nov Dec

- Select - 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022

--------HTML END--------------

--------- Jquery ---------------

$.validator.addMethod("selectMonth", function (value, element) {
return this.optional(element) || (value.indexOf('-1'));
}, "Please select month");
$.validator.addMethod("selectYear", function (value, element) {
return this.optional(element) || (value.indexOf('-1'));
}, "Please select year");

jQuery(document).ready(function () {
$("#mainForm").validate({
rules: {
<%=ddlPaymentType.UniqueID %>:{selectNone:true},
<%=txtAccountNumber.UniqueID %>:{required:true, digits:true},
<%=txtAmount.UniqueID %>:{required:true,decimalTwo:true},
<%=ddlExpirationMonth.UniqueID %>:{selectMonth:true},
<%=ddlExpirationYear.UniqueID %>:{selectYear:true}
},
groups: {
Expiration: "<%=ddlExpirationMonth.UniqueID %> <%=ddlExpirationYear.UniqueID %>"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "ctl00$ContentSection$ddlExpirationMonth" || element.attr("name") == "ctl00$ContentSection$ddlExpirationYear")
error.insertAfter("#ContentSection_ddlExpirationYear");
else
error.insertAfter(element);
}
});
------------ Jquery End --------------------

Auto Format (XXX-XXX-XXXX) Phone Number in Jquery

Phone Number:


------------Jquery-------------------
$('#txtboxID').keyup(function () {
var val = this.value.replace(/\D/g, '');
var newVal = '';
while (val.length > 3) {
if (val.length == 10) {
newVal += val.substr(0, 4);
return false;
} else {
newVal += val.substr(0, 3) + '-';
val = val.substr(3);
}
}
newVal += val;
this.value = newVal;
});
-----------------------

jQuery : Protect form submission on enter key-press

$(function() {

$("form").bind("keypress", function(e) {
if (e.keyCode == 13) return false;
});

});

In JavaScript(jquery) validation - text box without commas

Html Code:

Full Name:

Jquery

---------------------------------

jQuery.validator.addMethod("noCommas", function(value, element) {

return this.optional(element) || /^\s*(\w+(\s* \s*\w+)*)?\s*$/.test(value);

}, "Enter full name without commas");

jQuery(document).ready(function () {

$('#mainForm').validate({

rules: {

<%=txtBillingInfoFullName.UniqueID %>:{required:true, noCommas:true}

}

});

});

---------------------------------------------------

Output:

--------------->>>

-------------------------------

dfjkfjl 000 0huih jhjkh 6898

-------------------------------

jquery - assign a text to a textbox when checkbox is checked by client

   $('#<%= CheckBox1.ClientID %>').click(function ()
        {
           

            if (this.checked)
            {
                $('#<%= firstnamedrivertxt.ClientID %>').val($('#<%= firstnametxt.ClientID %>').val());
            }
            else
            {
                $('#<%= firstnamedrivertxt.ClientID %>').val(null);
            }
        });