CODEWITHSUNDEEP
javascriptjqueryvalidation
DonOfDen
DonOfDen

Reputation: 4108

TEXTBOX with Restriction in Symbols,Characters and Numbers

I am facing difficulties in Restricting Textbox Values.

The Textbox should not allow Symbols other than "?*,".

Ex: A123?*,B456?*,C789?*,D126?*,E?*666

After and before comma (,) only 10 Characters/Symbols/Numbers are allowed.

only 54 characters are allowed inside Textbox including comma's.

Only 4 comma's are allowed inside TEXTBOX.

Possible Text-box Inputs: ABC?12345*,A?BC*12345,A???1234**,?*C?12345*,ABC?123***

Also the Symbols and character are replaceable, Either at the start - Symbol might come or character or Numbers.

Kindly check the image for more clarification. enter image description here

I tried restricting with other Symbols and Allowed commas but I am facing difficulties in Restricting with 10 characters and allowing symbols and number of characters.

//<![CDATA[ 
window.onload = function() {
    /*var f = document.getElementById('textbox_restrict');
     f.addEventListener('keyup', function(evt){
     alert("Vinayagam");
     var regex = /[^a-zA-Z0-9]/;
     if(regex.test(this.value)) {
     this.value = this.value.replace(regex, '')  
     }
     });*/
    $('#textbox_restrict').keypress(function(e) {
        $('#backgroundPopup').animate({'opacity': 0.0, 'display': 'none'});
        this.value = this.value.replace(/[^0-9a-zA-Z\*\?\{0,12}]/g, '').toUpperCase();
    });

}//]]>  

$(function() {
    $('body').on('keyup', 'input[id^="textbox_restrict"]', function() {
        this.value = this.value.replace(/[^0-9a-zA-Z\*\?]/g, '').toUpperCase();
    });

    $('#search').live('click', function() {
    }); // End of save click function
}); // End of function

I also took reference to this Question but the senario is different: How restrict textbox in C# to only receive numbers and (dot "." or comma ","), after "." or "," only allow 2 number characters

Regex Replace anything but numbers and lowercase

jQuery keyup() illegal characters

Kindly Advice me! I was a bit confused to implement it.

Upvotes: 1

Views: 2504

Answers (2)

Teemu
Teemu

Reputation: 23416

Maybe it's better not to try to get all stuff done at once. I've cutted the task into pieces to simplify each stage. Just add the snippet below as a keyup or rather an oninput eventhandler to your input.

keyUp = function () {
    var n, parts, temp,
        text = this.value,
        caretPos = this.selectionEnd; // Stores the caret position
    parts = text.split(','); // Creates an array of comma separated values
    while (parts.length > 5) { // Limits the array length to 5 i.e only 4 commas allowed
        parts.pop();
    }
    for (n = 0; n < parts.length; n++) { // Iterates through each comma separated string
        parts[n] = parts[n].substring(0, 10); // Limits the string length to 10
        temp = parts[n].match(/[0-9a-zA-Z\*\?]/g); // Creates an array of acceptable characters in the string
        if (temp) {
            parts[n] = temp.join(''); // Adds the accepted value to the original
        } else { // If not value, add empty to the original
            parts[n] = '';
        }
    }
    this.value = parts.join(',').toUpperCase(); // Creates a new acceptable value to the input
    this.setSelectionRange(caretPos, caretPos); // Returns the caret to the original position
    return;
}

A live demo at jsFiddle.

EDIT

Removed string supress to 54 to avoid accidentally removed characters at the end of the string when adding characters in the middle of the string. Added else which will add an empty string in a case acceptable value wasn't found. Also looks like oninput would be a better event with this code.

EDIT II

Added a caret position returning to the original position after edited the string in the middle of it. Not perfect when pasting text with mouse, but seems to work on keyboard enter. (The fiddle link is updated.)

Upvotes: 1

Paul S.
Paul S.

Reputation: 66404

How about this RegExp,

/^(?:[a-z\d?*]{1,10}(?:,|$)){1,5}$/i

From the start of the string, permit characters a-z, a digit, ? and *, have between 1 and 10 of these, then either a comma or the end of the string. Repeat this at least once and at most 5 times. The string must then end. The i flag makes a-z include A-Z.

'A123?*,B456?*,C789?*,D126?*,E?*666'.match(/^(?:[a-z\d?*]{1,10}(?:,|$)){1,5}$/i);
// ["A123?*,B456?*,C789?*,D126?*,E?*666"]

It should be noted that this won't prevent a *?, ?x* or *x? and will also not prevent a comma at the end of the string.

Upvotes: 1

Related Questions