CodeIgniter Forums
Prevent the use of symbols - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forum-20.html)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forum-23.html)
+--- Thread: Prevent the use of symbols (/thread-36190.html)



Prevent the use of symbols - El Forum - 11-24-2010

[eluser]flyenig[/eluser]
I have 2 inputs where people can type their firstname or lastname.
I dont want them to type any symbol with their name (eg, @, *,$,%,!,♥...hearts. backwards letters, etc.)
and I dont want them to have any punctuation marks with their name either. (Kenny. Kenny, Kenny!) none of that.

How can i prevent this from happening? thanks


Prevent the use of symbols - El Forum - 11-24-2010

[eluser]vitoco[/eluser]
- on the client side you can use maskedinput plugin for jquery.
- on server side you can clean the input using a regular expresion

Saludos


Prevent the use of symbols - El Forum - 11-24-2010

[eluser]skunkbad[/eluser]
I think you might like this script that I wrote for client side limiting of chars. You can use it a few ways. I am usually using it with regex:

Code:
<!DOCTYPE html>
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Character Input Limiter&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
    [removed][removed]
&lt;/head&gt;
&lt;body&gt;
    <br>
    &lt;form id="myform" action=""&gt;
        <label for="element1">Alpha only</label>
        &lt;input id="element1" name="mytext1" type="text"&gt;
        <br />
        <label for="element2">Alpha numeric + some extras</label>
        &lt;input id="element2" name="mytext2" type="text"&gt;
        <br />
        <label for="element3">Numeric only</label>
        &lt;input id="element3" name="mytext3" type="text"&gt;
        <br />
        <label for="element4">Numeric + some extras</label>
        &lt;input id="element4" name="mytext4" type="text"&gt;
        <br />
        <label for="element5">Direct regular expression</label>
        &lt;input id="element5" name="mytext4" type="text"&gt;
    &lt;/form&gt;
[removed]
    /*
    DISALLOWED INPUT CHARACTERS
    */
    (function($){
        $.fn.disableChars = function(a) {

            /* bring in any modifications to allow */
            a = $.extend({
                allow: '',
                limit_to: '',
                direct_regex: null
            }, a);

            /* create the character base alpha, numeric, or alphanumeric (default) */
            if(a.limit_to == 'alpha'){
                charbase = 'a-z';
            }else if(a.limit_to == 'numeric'){
                charbase = '0-9';
            }else{
                charbase = 'a-z0-9';
            }

            /* convert allow string to regex */
            allowed = a.allow.split('');
            for ( i=0; i<allowed.length; i++){
                allowed[i] = "\\" + allowed[i];
            }
            a.allow = allowed.join('');

            /* combine character base with allowed chars and create regex object */
            if(a.direct_regex == null){
                var regex = new RegExp('[^' + charbase + a.allow + ']', 'ig');
            }else{
                var regex = a.direct_regex;
            }

            /* monitor events on designated elements */
            $(this)
            .bind('keyup blur', function() {
                if (this.value.search(regex) != '-1') {
                    this.value = this.value.replace(regex, '');
                }
            })
            .bind('contextmenu',function () {return false});

        }
    })(jQuery);

    $("#element1").disableChars({limit_to:"alpha"});
    $("#element2").disableChars({allow:".,:-() "});
    $("#element3").disableChars({limit_to:"numeric"});
    $("#element4").disableChars({limit_to:"numeric",allow:"-()."});
    $("#element5").disableChars({direct_regex:/[^-A-Z0-9~!#&*()_+:\'",.?]/ig});
[removed]
&lt;/body&gt;
&lt;/html&gt;



Prevent the use of symbols - El Forum - 11-24-2010

[eluser]skunkbad[/eluser]
The script tags were replaced with [removed], so just change them... and the script in the head was a link to jquery.


Prevent the use of symbols - El Forum - 11-25-2010

[eluser]nuwanda[/eluser]
The simple solution, and the one you should use, is the form validation rule in CI.

http://ellislab.com/codeigniter/user-guide/libraries/form_validation.html

The alpha rule.


Prevent the use of symbols - El Forum - 11-25-2010

[eluser]skunkbad[/eluser]
[quote author="nuwanda" date="1290697437"]The simple solution, and the one you should use, is the form validation rule in CI.

http://ellislab.com/codeigniter/user-guide/libraries/form_validation.html

The alpha rule.[/quote]

Of course you should provide form validation, but when a developer becomes lazy and does not provide client side validation of form fields, then the site visitors are inconvenienced with potentially re-submitting a form until they figure out the expected input.


Prevent the use of symbols - El Forum - 11-25-2010

[eluser]nuwanda[/eluser]
It's not about being lazy. It's really a matter of UI design philosophy. If your inputs have good instructions in the first place (see stackoverflow's system), and your validation messages are good, most users wouldn't need to submit a form more than twice to get it done.

That said, I think client-side validation can be helpful if you don't a) overuse it, and b) rely upon it.

Anyway, here's a little jQuery I use to reject characters in inputs:

Code:
$('#input').keyup(function(){
    this.value = this.value.replace(/[^0-9a-z\s-]/g,'');
});

That takes the current value of the input, and replaces the regex of unwanted characters with an empty string. To the user it looks like their input didn't happen.

In the above, anything that is not lowercase alphanumeric, a space, or a dash is rejected.


Prevent the use of symbols - El Forum - 12-06-2010

[eluser]flyenig[/eluser]
sorry guys i was on a little vacation, thanks for replying, ill try out the soulutions


Prevent the use of symbols - El Forum - 12-07-2010

[eluser]skunkbad[/eluser]
[quote author="flyenig" date="1291721260"]sorry guys i was on a little vacation, thanks for replying, ill try out the soulutions[/quote]

You might consider that my solution covers the pasting of data into the input. Of course, you should do your own testing.