Category

JQuery

US Mobile Number Format validate JQuery (123)456-7890

By | ASP.NET, JQuery

Validation Mobile Number Field in US Format Mobile Number with Regexp in javascript/JQuery

 

 


<input type="text" class="form-control" name="Phone" placeholder="(123)456-7890" id="MobileNumber" onblur="return validateUsNumber(this);" maxlength="14" />

function validateUsNumber(e) {
        var value = $(e).val();
        if (value.trim() != '') {
            var pattern = new RegExp("^[\\(]{0,1}([0-9]){3}[\\)]{0,1}[ ]?([^0-1]){1}([0-9]){2}[ ]?[-]?[ ]?([0-9]){4}[ ]*((x){0,1}([0-9]){1,5}){0,1}$");
            if (!pattern.test(value)) {
                alert("Please enter mobile number in valid format ! (123)456-7890");
                $(e).val('');
                return false;
            }
        }
    }


How to get first day date and last day date of a week in jquery ?

By | JQuery

If you want to get first day and last day of a week,  code is here :

 


var curr = new Date; // If you want of any date then just pass date in Date('08/22/2019')
        var first = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
        var last = first + 6; // last day is the first day + 6
        var firstday = new Date(curr.setDate(first)).toLocaleDateString();
        var lastday = new Date(curr.setDate(last)).toLocaleDateString();
        console.log(firstday );
        console.log(lastday );

This will give you Sunday as First Day and Saturday as last day
Tested on Chrome Browser Console :

Remove all li from ul in jquery

By | JQuery

If you have a <ul> and <li> in <ul>, and if you want to clear or remove all li from <ul>, here jquery code to empty this <ul>

HTML Code :

<ul class=”attachmentList”>

<li>First</li>

<li>Second</li>

<li>Third</li>

</ul>

 

$('.attachmentList').empty();

Multiple email validations in multiple text boxes with comma separate email ids in Javascript

By | ASP.NET, JQuery, MVC

Before Form submit, if you have multiple text boxes for emails like To Email and Cc Email, and both text boxes having multiple email ids with comma separate, then before form submit you can add validation through JQuery or java script.

 

<!DOCTYPE html>
<html>
<body>

<form>
To Email: <textarea name=”ToEmail” id=”ToEmail”></textarea><br>
CC Email: <textarea name=”CCEmail” id=”CCEmail”></textarea><br>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>

 


$('form').submit(function () {
        var ToEmail = $('#ToEmail').val();
        var CCEmail = $('#CCEmail').val();
        var validArray = [];
        var emails = ToEmail.replace(/\s/g, '').split(",");
        Array.prototype.push.apply(emails, CCEmail.replace(/\s/g, '').split(","));
        var valid = true;
        var regex = /^(([^&amp;amp;lt;&amp;amp;gt;()[\]\\.,;:\s@\"]+(\.[^&amp;amp;lt;&amp;amp;gt;()[\]\\.,;:\s@\"]+)*)|(\".+\"))@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

        for (var i = 0; i &amp;amp;lt; emails.length; i++) {
            if (emails[i] == "" || !regex.test(emails[i])) {
                valid = false;
            }
            validArray.push(valid);
        }
        var isFalse = validArray.includes(false);
        if (isFalse == true) {
alert("Please enter emails in proper format !");
            return false;
        }
        else {
            return true;
        }
    });

Now Here an array will store comma separate email ids of first text box and then same array will append the more email ids from another text box, for this we have used :


Array.prototype.push.apply(emails, CCEmail.replace(/\s/g, '').split(","));

Above line of code will append second text box email ids into array, that already having values of first textbox.(email)

Note:- If you are working on ASP.NET MVC Razor then in Regex Expression you have to replace @ to @@, because @ will determine as razor syntex.

Editable Text Box In Jquery And Post Data to ASP.NET

By | ASP.NET, JQuery, MVC

 

Here i have a grid, and in grid i have a column with Quanity, so if i want to change this quantity with editable text box.

so Here will be Link tag and text box with some id and selectors.

And this will work if there will multiple editable textboxes are there in table grid.

Here First HTML Code

<a href="JavaScript:Void(0);" id="editqty">@item.Qty</a>
<input type="text" style="width:70px;display:none;" class="form-control" id="qtyValue" value="@item.Qty" data-value="@item.PKId" data-target="@item.Qty" />

So above is html code and only <a> tag will be shown on grid, and when you will click on Link then it will hide and text box will show.
In this jquery code all other text box in grid and all things will be same as previous.
Below is jquery code
$("a[id$='editqty']").each(function () {
$(this).on('click', function () {
$("input[type='text'][id$='qtyValue']").hide();
$("a[id$='editqty']").show();
$(this).next('input[type=text]').show();
$(this).next('input[type=text]').val($(this).html());
$(this).hide();
});
});

$("input[type='text'][id$='qtyValue']").blur(function () {

$(this).prev("a[id$='editqty']").show();
$(this).hide();

var prevValue = $(this).attr('data-target');
var savedValue = $(this).val().trim();
var id = $(this).attr('data-value');

if (prevValue != savedValue)

{

$.ajax({
cache: false,
type: "POST",
url: '@Url.Action("Index","Employee")',
data: { savedValue: savedValue, id: id },
success: function (data) {
alert(data);
},
error: function (xhr, ajaxOptions, thrownError) {
if (xhr.status == 401) {
window.location.href =  "Account/Login/";
}
}
});

}

}

Validate textbox only numeric or number in JQuery

By | JQuery

If you want to validate text for for entering only number or numeric values then here is jquery/javascript code.(Tested)

Below Is for All text box on page

$(document).ready(function () {
            $("input[type='text']").keypress(function (e) {
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    return false;
                }
            });
        });

And if you want to apply on specific text box then you can use selecter ID or class as you wish.



$(document).ready(function () {
            $("#txtbox1").keypress(function (e) {
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    return false;
                }
            });
        });

How to get selected checkboxes value using JQuery?

By | JQuery | No Comments

Here 4 checkboxes with same class “chk” and now i want values of checked checkboxes values on a button click

<input type="checkbox" class="chk" id="filterCheckboxSub" value="1" 
<input type="checkbox" class="chk" id="filterCheckboxSub" value="2" 
<input type="checkbox" class="chk" id="filterCheckboxSub" value="3" 
<input type="checkbox" class="chk" id="filterCheckboxSub" value="4" 
<button type="button" id="btnFilter">Filter</button>

Here the jquery code for getting value of selected checkboxes.

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

            var chkArray = [];

            $(".chk:checked").each(function () {
                chkArray.push($(this).val());
            });

            var selected;
            selected = chkArray.join(',');

            if (selected.length &gt; 0) {
                alert("You have selected " + selected);
            } else {
                alert("Please at least check one of the checkbox");
            }

        });

Manual disable datepicker Entry In javascript

By | JQuery | No Comments

While you are working on javascript datepicker, and if you restricts the date range then user should also restrict to do manual input of date.

you can’t put readonly or disabled attribute on date input textbox.

you can put attr() and readonly attribute at the datepicker method.

Ex:

$('.datepickr').datepicker({
                'format': 'mm-dd-yyyy',
                'autoclose': true,
                'forceParse': false,
                'startDate': '03-19-2019',
                'endDate': '03-25-2019'
            }).attr('readonly', 'readonly');

this is the way to add readonly attribute when you are using datepicker on a textbox.