Validating input field using regEx not working

Question

I was asked to validate our input fields. In that way I limited the characters you'll be able to fill in in an input field. My input field will increment whenever I add some data and I'm using one id for all.

It works on the first row but the rest it doesn't. Any suggestions how to fix it?

            echo""
            . "<form action=maintenance.php method=POST>"
            . "<tr>"
            . "<td><input class='textbox' type=text id='name' name=name value='" . $record['name'] . "'> </td>"
            . "<td><input class='textbox' size=50 id='url' type=url name=url value='" . $record['url'] . "'></td>"
            . "<td><textarea class=textbox rows=2 cols=50 wrap=physical id=desc name=desc>" . strip_tags($record['description']) . "</textarea></td>"
            . "<input type=hidden name=hidden value='" . $record['name'] . "'>"
            . "<td><button class='btn-style-icons shrink' type=submit name=update><img src=icons/update.png alt=Update></button></td>"
            . "<td><button class='btn-style-icons shrink' type=submit name=delete><img src=icons/delete.png alt=Delete></button></td>"
            . "</tr>"
            . "</form>";
        }
        echo""
        . "</table>"
        . "<table>"
        . "<form action=maintenance.php method=POST>"
        . "<tr>"
        . "<td><input class='textbox' id='name' type=text name=iname></td>"
        . "<td><input class='textbox' id='url' size= 50 url=url name=iurl></td>"
        . "<td><textarea class=textbox id=desc rows=2 cols=50 name=idesc></textarea></td>"
        . "<td><button class='btn-style-icons shrink' type=submit name=add id=add><img src=icons/add.png alt=Add></button></td>"
        . "</tr>"
        . "</form>"
        . "</table>";

This is how it looks like:

enter image description here

action.js

$(document).ready(function () {
    $('#name').bind('keypress', function (event) {
        var regex = new RegExp("^[a-zA-Z0-9 \b\t]+$");
        var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
        if (!regex.test(key)) {
            event.preventDefault();
            return false;
        }
    });

    $('#url').bind('keypress', function (event) {
        var regex = new RegExp("^[a-zA-Z0-9://. \b\t]+$");
        var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
        if (!regex.test(key)) {
            event.preventDefault();
            return false;
        }
    });
});

ID need to be unique, use classes instead. If for some reason you want invalid code, just add a space at the start of your select : $(' #name'). — Karl-André Gagnon
– Karl-André Gagnon, Commented Dec 9, 2014 at 14:53
@Karl-AndréGagnon OMG YOU'RE A LIFE SAVER. PLEASE answer, so i can accept it :D — Kamilah
– Kamilah, Commented Dec 9, 2014 at 14:55
Use native regex syntax: var regex = /^[a-zA-Z0-9 \b\t]+$/; - your regular expression won't work as it is because you didn't escape the backslashes. — Pointy
– Pointy, Commented Dec 9, 2014 at 14:56
Welcome to StackOverflow! Please see "Should questions include “tags” in their titles?", where the consensus is "no, they should not". — user57508
– user57508, Commented Dec 9, 2014 at 15:03

Karl-André Gagnon · Accepted Answer · 2014-12-09 15:01:30Z

4

Good solution

ID must be unique, so instead of id="name" or id="url", use class="name" and class="url". Afterward, you can change your selector to .name and .url and it will work.

Hack solution

If for some reason you want invalide HTML and duplicate your IDs, you can exploit jQuery and insert a space before the selector. It will return more than 1 element.

$(' #name')
$(' #url')

Do not use that except if you have a gun against your head and someone ask you to debug his code without changing the HTML. Use classes, that's why they exist.

answered Dec 9, 2014 at 15:01

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kamilah Over a year ago

thanks :) Class didn't work for me. So i needed the hack solution :)

Chuck · Accepted Answer · 2014-12-09 14:56:53Z

1

HTML ids must be unique per page. If you want to select multiple elements by the same identifier, you should use a class. Remember that each html element can have multiple classes. So for your example you may want to have a class attribute that looks something like class='textbox name'. Then you can select everything with the name class using jquery $(.name).

You can find more info about class vs id here: http://css-tricks.com/the-difference-between-id-and-class/

Also, if you're just trying to limit the number of characters in an input, the javascript solution may be overkill for you as you can just set a maxlength property on the input.

answered Dec 9, 2014 at 14:56

Chuck

2062 silver badges6 bronze badges

Collectives™ on Stack Overflow

Validating input field using regEx not working

2 Answers 2

Good solution

Hack solution

Do not use that except if you have a gun against your head and someone ask you to debug his code without changing the HTML. Use classes, that's why they exist.

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Good solution

Hack solution

Do not use that except if you have a gun against your head and someone ask you to debug his code without changing the HTML. Use classes, that's why they exist.

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related