Login

11-24-2010, 06:41 PM

[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

11-24-2010, 07:06 PM

[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

11-24-2010, 07:57 PM

[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;

11-24-2010, 07:59 PM

[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.

11-25-2010, 03:03 AM

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

http://ellislab.com/codeigniter/user-gui...ation.html

The alpha rule.

11-25-2010, 10:37 AM

[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-gui...ation.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.

11-25-2010, 03:41 PM

[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.

12-06-2010, 11:27 PM

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

12-07-2010, 01:57 AM

[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.