Question

I have a form consisting of a textarea, with line numbers thanks to Javascript.
I use this form to validate JSON, just like jsonlint.org does it.
The user enters some JSON, presses validate, and gets back the answer.
I am not parsing the file myself, I use a python command :

python -m json.tool input.json

As you can see, this command takes a file. So what I am doing is the following :

• write form data to the file
• run this command and get output
• if no error, output to screen “Valid JSON” like jsonlint.org
  else show error message given by the program : “Error …. line x column y (char z)”

The line number given by the Python program corresponds to the one in the file and not to the one from textarea … making my Javascript linenumbers useless. Finding a correspondence btw the 2 is giving me a hard time because it depends on the width of my textarea, and the font I’m using in it, and understanding how line numbers in files are set (which I do not really understand)

How could I find a correspondence btw the 2 ?

Thanks

JUST REALISING : my textarea looks exactly the same as the one you type in when you ask a question on SOF 😀

—– EDIT as response to Ben —–
Very interesting. I implemented the feature I asked for using an option of the textarea called “wrap”. I set to “soft” :

<form method='post' action='/exec' id="jsonform" >
       <textarea wrap="hard" name="json" id="json_input" rows="20" cols="150" placeholder="Enter JSON to validate.">{{ resp | safe }}</textarea>
       <div align="center">
       <input type='submit' value='Validate' id="button" >
       </div>
    </form>

However, this makes valid JSON invalid. Because the Python module expects to have quotes before the break-line …
So I need to feed the validator with data from the form with textarea=”soft”, and show the data from the form with textarea=”hard” . But I have one form.
Also I tried the code given on the post you gave me, but it didn’t work for some reason. And I don’t know Javascript (need to change that.) so I couldn’t debug or adapt the code …
HELLLP

Answer 1

Instead of trying to derive your lines after the fact, you’re probably better off putting in markers before you send the data to be tested. finding "line-breaks" in textarea that is word-wrapping ARABIC text looks like it has a pretty robust technique for forcing line breaks at all line wraps. If the line breaks used by the textarea and the lien breaks used by the file are not the same, you should still find it relatively easy to convert from one to the other in transit. If you don’t want to perturb it because you want the user to be able to edit it without the additional line breaks if/when it comes back invalid, then I’d suggest cloning the textarea to a space inside a “display:none” div or equivalent setup. Mangle and test the clone as appropriate, and then put the feedback on the untouched visible original. If the file has an autowrap width, then you’ll have to make sure that the autowrap width of the textarea is shorter, but that shoudln’t be difficult, and I’d be a bit surprised if it was an issue to begin with.

Edit: if the python module has to have quotes before the break-line, you’re in a bit of trouble anyway – anyone can put in hard break-lines manually at any time just by hitting enter. My suggestion there would be to have some sort of processor function in between the Json and the file that went and put appropriate quotes just before line breaks – although I may be misunderstanding things a bit here.

If you want multiple copies of your form to play with, though, that’s totally doable. You do need to use jQuery, but jQuery is worth learning anyway. (It’s somewhat frustrating until you figure it out, and then after you figure it out it’s the best thing that ever happened to javascript and you’ll never want to be without it.) Include the most recent copy of jQuery (it’s a javascript plugin). The clone() function will let you create an exact duplicate of your existing textarea (or form, or any other DOM object, really) at time of cloning (ie, it’ll have all the text written into it). The insertBefore() and/or insertAfter() functions will let you put it anywhere in the page you want – perhaps inside a <div style="display:none"></div> so that you can muck around with it as much as you like without doing anything visible on the screen.