How to allow non alphanumeric characters in a html5 / jquery mobile form input

Question

I have a form input field for a to-do list style app for iOS using cordova. I'd like the user to be able to enter characters such as: ! % & + However these caused the app to crash. My temporary fix was to restrict the key input on the form field using the .keypress function. However I'd like to find a way for users to be able to include these characters in their list items. (I also realized that adding a blank space as the only input causes the app to crash.)

I've see a lot of Q+As for validation that restricts the use of these characters but is it possible to be able to use them in a form input?

Thank you!

/* Form to make a new list item */
    $('.formMain').submit(function () {
        var key = Date.now();
        var text = $('#todo').val();
        var textTrim = text.replace(/ /g, '').toLowerCase();
        var checked = false;
        var quantity = $('#quantity').val();

        // if the inputs are blank
        if (text.length == 0) {
            return false;
        }
        // if item already on list
        else if ($('.list #' + textTrim).length) {
            alert(text + " already on list!");
        }

        // if the input box is not empty run the template function   
        else if ((text.length > 0) === true) {
            var html = template(text, textTrim, key, checked, quantity);
            $('.list').append(html);
            itemListArray.push({ key: key, text: text, textTrim:textTrim, checked: checked, quantity: quantity});
        // Save the item list array
        if (window.localStorage) {
            window.localStorage.setItem('itemListArray', JSON.stringify(itemListArray));
            } 
            $('#todo').val("");
            $('#quantity').val("");
        }
        return false;

Why did it crash? Are you validating the characters at all? What's the error? How are you using the data? — noahnu, Mar 21 '16 at 19:26
- e.g. If i remove the .keypress restrictions and type a "&" in the input field the app crashes (meaning Ripple/the iPhone pulls up my "information" screen and non of the menu buttons work - you then need to swipe close the app on the phone and restart). - I'll add code to show how the data is being used above... thanks! — Alistair Cooper, Mar 21 '16 at 19:35
Update: the crashing seems to be caused by the variable var = textTrim when there's a metacharacter in textTrim (e.g. "&" )and it's sent through the template() function to build the html elements (and assign textTrim to an id) that's when the crash occurs. I'm working on escaping those characters before the textTrim variable is sent to that function...seems to be working. — Alistair Cooper, Mar 22 '16 at 06:13
You want HTML encoding: http://stackoverflow.com/questions/1787322/htmlspecialchars-equivalent-in-javascript?lq=1, http://stackoverflow.com/questions/3043775/how-to-escape-html — noahnu, Mar 22 '16 at 14:38

score 0 · Answer 1 · answered Mar 30 '16 at 00:55

Thank you for the push in the right direction noahnu.

The crashes were occurring when meta-characters were being assigned to my "textTrim" variable. I believe the issue is when that variable contains meta-characters and is assigned to the ID of a html tag. (I'm using textTrim as a way to uniquely identify items for validation purposes).

var textTrim = escapeHtml(text).toLowerCase();

The problem was solved by creating a escapeHtml function that replaces each character with its decimal value. e.g.

function escapeHtml(text) {
    return text
    .replace(/&/g, "38")   // etc

How to allow non alphanumeric characters in a html5 / jquery mobile form input

1 Answers1