How to make sure a textarea has string values separated with commas

Question

I have tried googling this info for hours and am not sure if I am just not searching correctly. Everything I have seen says their textarea has information separated by commas and they want to do something else. I am trying to figure out how to actually make sure users enter string values separated by commas (so either while entering a message occurs if they enter a ; etc or upon submit a validation occurs). I am wanting the values separated by commas because upon submit, I have the strings entered into an array using split with commas as the deliminator. I am using html, javascript, and python. Please don't ask me to use other languages or to not use cgi as I don't have the capability of adding anything to my class computer. Thank you for any help!

HTML code:

<html>
<head>
<script type='text/javascript'>
function track()
{
    var xhttp = new XMLHttpRequest();
    var tnum=document.getElementById('tnum').value; //get value of textarea
    if (trimAll(document.getElementById('tnum').value) === '')
    {
     alert('Please enter a tracking number!');
    }

    xhttp.onreadystatechange = function()
    {
        if (xhttp.readyState == 4 && xhttp.status == 200)
        {
            document.getElementById('trackinfo').innerHTML = xhttp.responseText;
        }
    };
    xhttp.open("POST", 'http://localhost:8000/cgi-bin/track_project_fxn.py', true);
    xhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    xhttp.send('tnum='+tnum);
}
function trimAll(sString)
{
    while (sString.substring(0,1) == ' ')
    {
        sString = sString.substring(1, sString.length);
    }
    while (sString.substring(sString.length-1, sString.length) == ' ')
    {
        sString = sString.substring(0,sString.length-1);
    }
return sString;
}
</script>
</head>
<body bgcolor="33cccc">
<br>
<h3>Tracking</h3>

<form id="trackform">
<textarea form="trackform" id="tnum" rows="10" cols="45" style="resize:none" placeholder="Enter up to 25 tracking numbers, one per line, and separated by commas">
</textarea>
<br><Br>
<input type="button" value="Submit" onclick="track()">&nbsp;&nbsp;
<input type="reset" value="Clear">

</form>
<div id="trackinfo">
</body>
</html>

Python code:

import cgi, cgitb, re
cgitb.enable

form=cgi.FieldStorage()
tnum=form.getvalue('tnum')
unum=tnum.upper()
snum=re.sub('[\s+]', '',unum)
tlist=snum.split(',')


print("Content-type:text/html\r\n\r")
print()

for tnumber in tlist:   
   <logic>

what exactly do you want to send from browser? Add an example. Also what all valid formats are allowed to be entered by the user? — gurvinder372, May 02 '16 at 13:25
Correct me if I am wrong, do you want different words in a string to be separated by commas or user will be giving an input of several strings separated by commas? — Stack learner, May 02 '16 at 13:25
The user will be typing into the textarea up to 25 different strings consisting of numbers and letter and they should separate each string with only a comma. — Tigger, May 02 '16 at 14:15

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

Build an on change function to watch the textarea for changes and use regex to validate the change each time. Or use HTML5 form validation.

Then allow the change if its valid otherwise alert the user their change is invalid. You could disable the submit button or build a more detailed function that will help the user auto format the text.

I'm no expert on regex but it is really powerful and this seems like a good use for it.

Here is some info on form validation.

Here is a StackOverflow link about comma separated regex.

edited May 23 '17 at 11:52

Community

1
1

answered May 02 '16 at 13:48

arodjabel

420
5
14

Thank you for the links. I will look into them! – Tigger May 02 '16 at 14:15

maxeh · Accepted Answer · 2016-05-02T14:26:31.527

You could use a regular expression to check the value of the textarea. If I understand your problem the user should only be able to enter numbers and commas. Moreover the textarea should not start with a comma and end with a comma. You could check the value of the textarea after the user submits the form:

var xhttp = new XMLHttpRequest();
var tnum=document.getElementById('tnum').value; //get value of textarea
if (trimAll(document.getElementById('tnum').value) === '')
{
 alert('Please enter a tracking number!');
 return false; // I think you forgot this
}
if (wrongFormat(tnum)){
 alert("Only numbers and commas");
 return false;
}

[..]

function wrongFormat(s){
if (s.match(/[^0-9,]/)) return true; // with letters /[^0-9A-Za-z,]/
if (!s.charAt(0).match(/[0-9]/) || !s.charAt(s.length-1).match(/[0-9]/)) return true;
if (s.match(/[,][,]/)) return true; // check if there are 2 commas in a row
}

Thank you. I will check this out! – Tigger May 02 '16 at 14:15 — Tigger, May 02 '16 at 14:15

How to make sure a textarea has string values separated with commas

2 Answers2