[Commonly] Used jQuery Client Side Validations

google

Here we will learn some Commonly Used jQuery Client Side Validations by developer like allow numeric only, allow characters only, disable right-click, etc.

/*
Commonly Used jQuery Validations by pushpam abhishek
Site: https://www.trickcode.in/
*/
jQuery.fn.AllowNumericOnly = function (e) { return this.each(function () { $(this).keydown(function () { return 46 == event.keyCode || 8 == event.keyCode || 9 == event.keyCode || 27 == event.keyCode || 13 == event.keyCode || (65 == event.keyCode || 67 == event.keyCode) && event.ctrlKey === !0 || event.keyCode >= 35 && event.keyCode <= 39 ? !0 : !e || 189 != event.keyCode && 109 != event.keyCode ? event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105) ? !1 : void 0 : $(this).val().split("-").length > 1 ? !1 : event.shiftKey ? !1 : !0 }) }) }, jQuery.fn.AllowDecimalOnly = function (e) { return this.each(function () { $(this).keydown(function () { return 190 == event.keyCode && $(this).val().split(".").length > 1 ? !1 : 110 == event.keyCode && $(this).val().split(".").length > 1 ? !1 : 190 == event.keyCode || 46 == event.keyCode || 8 == event.keyCode || 9 == event.keyCode || 27 == event.keyCode || 13 == event.keyCode || (65 == event.keyCode || 67 == event.keyCode) && event.ctrlKey === !0 || event.keyCode >= 35 && event.keyCode <= 39 || event.keyCode >= 48 && event.keyCode <= 57 || event.keyCode >= 96 && event.keyCode <= 105 || 110 == event.keyCode || 109 == event.keyCode ? !0 : !e || 189 != event.keyCode && 109 != event.keyCode ? !1 : $(this).val().split("-").length > 1 ? !1 : event.shiftKey ? !1 : !0 }) }) }, jQuery.fn.AllowCharactersOnly = function () { return this.each(function () { $(this).keydown(function () { return 46 == event.keyCode || 8 == event.keyCode || 9 == event.keyCode || 27 == event.keyCode || 13 == event.keyCode || (65 == event.keyCode || 67 == event.keyCode) && event.ctrlKey === !0 || event.keyCode >= 35 && event.keyCode <= 39 || event.keyCode >= 65 && event.keyCode <= 90 || event.keyCode >= 97 && event.keyCode <= 122 ? !0 : event.shiftKey || (event.keyCode > 48 || event.keyCode < 57) && (event.keyCode < 96 || event.keyCode > 105) ? !1 : void 0 }) }) }, jQuery.fn.MakeReadOnly = function () { return this.each(function () { $(this).keydown(function () { return 9 == event.keyCode || 27 == event.keyCode || 13 == event.keyCode || (65 == event.keyCode || 67 == event.keyCode) && event.ctrlKey === !0 || event.keyCode >= 35 && event.keyCode <= 39 ? !0 : !1 }) }) }, jQuery.fn.DisableCutCopyPaste = function () { this.bind("copy paste cut", function (e) { e.preventDefault() }) }, jQuery.fn.DisableRightClick = function () { this.bind("contextmenu", function (e) { e.preventDefault() }) };

First, you need to Copy and Paste new  javascript file jquery-common.js containing all required validations.

Save on the link and choose "Save link as" to save the file to your computer.

Now you need to add reference of jQuery core library and jquery-common.js file so that you can use functions written in this file.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="~/Scripts/jquery-common.js"></script>

An example to apply these validations. You may have asp.net text boxes on your page or simple HTML textboxes:

<asp:TextBox ID="txtdemo" runat="server" Width="300px"></asp:TextBox>
 //or
<input type="text"  id="txtdemo"/>

select that textbox and for HTML's textbox you can directly select that text box using id $("#txtTest"). You may need to apply validation on multiple textboxes.

Allow Number Only

If you want a client-side validation to allow only numeric values in your text box, apply this function to that textbox.

$(document).ready(function () {
  $("#txtTest").AllowNumericOnly();
});

By calling AllowNumericOnly function, your text box will allow only numbers.
You may need to allow a negative number in you textbox; in that case you need to pass true as a parameter in this method:

$(document).ready(function () {
  $("#txtTest").AllowNumericOnly(true);
});

Now #txtTest will allow single minus for negative number like -1214.

Allow Decimal Only

If you want a client-side validation to allow only decimal values in your text box, apply this function to that textbox.

$(document).ready(function () {
  $("#txtTest").AllowDecimalOnly();
});

By calling AllowDecimalOnly function, your text box will allow only decimals.
You may need to allow negative decimal number in you textbox; in that case you need to pass true as a parameter in this method:

$(document).ready(function () {
  $("#txtTest").AllowDecimalOnly(true);
});

Now #txtTest will allow single minus for negative decimal number like -12.421.

Allow Characters Only

If you want a client-side validation to allow only characters in your text box, apply this function on that textbox.

$(document).ready(function () {
  $("#txtTest").AllowCharactersOnly();
});

By calling AllowCharactersOnly function, your text box will allow the only character.

Make Read Only

If you want a client-side validation to make your text box as read-only, apply this function on that textbox.

$(document).ready(function () {
  $("#txtTest").MakeReadOnly();
});

Disable Cut, Copy and Paste

If you want a client-side validation to disable cut, copy and paste on a specific element like textbox or div, apply this function on that element.

$(document).ready(function () {
  $("#txtTest").DisableCutCopyPaste(); //To disable cut, copy and paste on textbox #txtTest
  $("#divTest").DisableCutCopyPaste(); //To disable cut, copy and paste on div #txtTest
});

By calling DisableCutCopyPaste function; cut, copy and paste will be disabled on a text box 

Disable Right Click

If you want a client-side validation to disable right click on a specific element like textbox.

$(document).ready(function () {
  $("#txtTest").DisableRightClick(); //To disable right click on textbox #txtTest
  $("#divTest").DisableRightClick(); //To disable right click on div #txtTest
});

By calling DisableRightClick function right-click will be disabled on text box or div. You can also apply it on the whole page by specifying the body tag in the selector.

---