[Solved] Create a Custom generic jQuery function for validating TextBoxes

EmadKhan

SOLVED CLOSED ACTIVE ANSWERED
User: EmadKhan
Posted: on Jan 19, 2015 02:50 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 5711

I have many textboxes/textarea in my webforms. Now i want to make a generic jQuery function which will do the following things and validations on keyPress/KeyDown .

1- On calling the function on any input area i would like to pass 3 parameters on that function. 1- That specific field ID , 2- Number of characters allowed , 3- Error Message to display.

2- Upon execeding of limit prescribed in any input areas function it must validate that user's entered character must not exceed that limit , and if exceeding then it must not allowed to input anything. and also show a jQuery pop up showing the error message which i had prescribed while calling function.

3- after showing error message in pop up when user clicks on OK , then it must focus on that specific textbox from where error was raised.

the e.g would be like this :

<input type="text" runat="server" clientidmode="static" id="field1" onkeypress="ValidateMe("field1",15,"Please enter firstname field")" />

<input type="text" runat="server" clientidmode="static" id="field2" onkeypress="ValidateMe("field2",10,"Please enter last name field")" />

function ValidateMe(ID,Limit,Mesg)
{
 // please describe coding for this
}

EmadKhan

0 8

Reply
ANSWER
User: EmadKhan
Replied: on Jan 19, 2015 05:36 AM
Modified: on Jan 20, 2015 03:37 AM
Report

HTML DEMO

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        input
        {
            margin: 10px 10px 10px 10px;
        }
        input:focus
        {
            border: 2px solid black;
        }
        .error
        {
            color: Red;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        var ID;
        function myFunc(id, length, mesg, evt) {
            evt = evt || window.event;
            var charCode = evt.which || evt.keyCode;
            var charStr = String.fromCharCode(charCode);
            ID = id;
            if (/[a-z0-9]/i.test(charStr)) {
                if ($('#' + id).val().length > length - 1) {
                    $('.error').html(mesg);
                    return false;
                }
            }

            else { $('.error').html(''); return true; }
        }

        function ShowPopup(message) {
            $(function () {
                $("#SPDialog").html(message);
                $("#SPDialog").dialog({
                    title: "Message",
                    buttons: {
                        Close: function () {
                            $(this).dialog('close');
                            $('#' + ID).focus();
                        }
                    },
                    modal: true
                });
            });
        }
    </script>
</head>
<body>
    <div id="SPDialog">
    </div>
    <span class="error"></span>
    <br />
    <input type="text" placeholder="15 Characters allowed" id="field1" onkeypress="return myFunc(this.id,15,'You can\'t enter more than the limit specified',event)" />
    <input type="text" placeholder="2 Characters allowed" id="field2" onkeypress="return myFunc(this.id,2,'You can\'t enter more than the limit specified',event)" />
</body>
</html>

Demo

[Solved] Create a Custom generic jQuery function for validating TextBoxes

Company

Explore

Follow us

Contact Us