Javascript regex in data attributes

Question

I am in the process of making a custom form validation plugin. It is using the HTML5 data attribute that is placed within each input where special parameters need to be met. example:

<input type="text" name="year" id="year" data-valid='{"message":"a", "regEx":"^\$?(\d+|\d*\.\d+)$"}' required />

The initial data object is coming into the javascript just fine but when I extend the object under certain custom regex's the extended object is causing errors.

Here is the code snippet that is creating the object:

var data = $this.data();           
        var defaults = {
            specialType: '', //currently accepts VIN, USPhone and Email
            inputType: '', //intLetter(accepts only integers and numbers), integer, float, floatInteger(accepts both floats or integer) letters, or all(accepts anything the user types)
            inputLength: '', //define max length user can input
            regEx: '', //define ur own regular expression (this will override the datatype)
            message: ''
        }

        var validObj = $.extend({}, defaults, data.valid);

Now if I use a regex without an \ it works one similar to: ^[0-9]+$

the inputs html will look like:

<input type="text" name="year" id="year" data-valid='{"message":"a", "regEx":"^[a-zA-Z]+$"}' required />

The object that gets extended will then print in google chromes console like:

Object {specialType: "", inputType: "", inputLength: "", regEx: "^[a-zA-Z]+$", message: "a"…}

but, if I use a regex like: ^\$?(\d+|\d*.\d+)$

the inputs html will look like:

Google chrome spits out an object like:

Object {0: "{", 1: """, 2: "d", 3: "a", 4: "t", 5: "a", 6: "t", 7: "y", 8: "p", 9: "e", 10: """, 11: ":", 12: """, 13: "f", 14: "l", 15: "o", 16: "a", 17: "t", 18: "I", 19: "n", 20: "t", 21: "e", 22: "g", 23: "e", 24: "r", 25: """, 26: ",", 27: " ", 28: """, 29: "m", 30: "e", 31: "s", 32: "s", 33: "a", 34: "g", 35: "e", 36: """, 37: ":", 38: """, 39: "a", 40: """, 41: ",", 42: " ", 43: """, 44: "r", 45: "e", 46: "g", 47: "E", 48: "x", 49: """, 50: ":", 51: """, 52: "^", 53: "\", 54: "$", 55: "?", 56: "(", 57: "\", 58: "d", 59: "+", 60: "|", 61: "\", 62: "d", 63: "*", 64: "\", 65: ".", 66: "\", 67: "d", 68: "+", 69: ")", 70: "$", 71: """, 72: "}", specialType: "", inputType: "", inputLength: "", regEx: "", message: ""}

I am at a loss as to why. I have tried putting in the regular expression with / at the beginning and end, but that is not working either. Any help would be greatly appreciated.

why would you want to put regex in markup? Why not alias the regex with readable names? — charlietfl
– charlietfl, Commented Dec 2, 2013 at 16:49

Shreyas · Accepted Answer · 2013-12-02 16:49:42Z

2

This is because \ is an escape character. You would have to escape it by placing another \ before it. So you need to put \\ in your data attribute.

answered Dec 2, 2013 at 16:49

Shreyas

1,4629 silver badges12 bronze badges

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

1 Comment

user2112618 Over a year ago

Wow, now I feel like an idiot for missing that. This worked like a charm and now I know that it isn't a bug in my code. I will just have to put that information in the documentation. Thanks again and when it allows me to mark this as the answer I will.

Collectives™ on Stack Overflow

Javascript regex in data attributes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related