1

I have a website built on cherrypy which a user can submit some information via a form on one of the pages and then via javascript has some validation that the required fields are filled in. I was originally attempting to verify some integer only fields were indeed integers with something similar to this within my submit javascript before I passed it onto a python function to handle my db and other submissions.

$("#btnSubmit").click(function(){
    $("#dlgmessage").html("Processing...");
    $("#dialog-message").dialog("open");

    var assigned_port = ($("#txtAssignedPort").val())
    if(
        Number.isInteger(assigned_port) === false
    ){
        $("dlgmessage").html("Assigned Port is an Integer only field")
        $("dialog-message").dialog("open");
        document.getElementById('txtAssignedPort').style.borderColor = "red";
        document.getElementById('txtAssignedPort_label').style.color = "red";
    return;
    } 

<--snip-->
};

That was not working for me though as no matter my input it was always false even if all I entered was numbers.

So, I moved onto instead adding some additional pieces to my html files which define the form. Previously they would all look similar to: 

<label id="txtAssignedPort_label" >Assigned Port (*)</label>
<input class="form-control" placeholder="Assigned Port (numbers only)" id="txtAssignedPort" value="${assigned_port}" />

I then added some additional attributes to the input element like so:

<label id="txtAssignedPort_label" >Assigned Port (*)</label>
<input class="form-control" type="number" step="1" min="0" max="65535" placeholder="Assigned Port (numbers only)" id="txtAssignedPort" value="${assigned_port}" maxlength="38" />

This then restricted the user from even typing any non number value. But, as explained in this stackoverflow post, Why does the html input with type "number" allow the letter 'e' to be entered in the field?, the number fields will accept 'e' as a value since it can accept floating point numbers.

Doesn't seem like a huge issue that it supports 'e' but then the issue arrives when I attempt to submit something with an e in the input. I added a simple line to my javascript console.log("ASSIGNED PORT = " + ($("#txtAssignedPort").val())); in order to view what the javascript was viewing the input as. This results in a console log of ASSIGNED PORT = 12345 when I do only numbers but as soon as I use an 'e' it instead shows ASSIGNED PORT = with no value defined for my input ($("#txtAssignedPort").val()))

While I don't expect users to ever really try and submit one with an e, I still want to cover my bases to make my inputs as clean as possible.

Why is it that my javascript views that input field as null once an 'e' character is included?

Is there a better way I should be trying to accomplish this, like with the javascript I had at first that was not working properly at the time?

stephen
  • 506
  • 1
  • 5
  • 17
  • 2
    bear in mind that e is Scientific Notation for `x10^y` so 12345e1 is 123450, which is greater than your maximum value of 65535. Does it work if you try 10e3 for example, which at 10000 is less than your limit? – sauntimo Jul 21 '17 at 00:21
  • Note, "e" used in JavaScript is an artifact of the language, and not the number _`e`_ – guest271314 Jul 21 '17 at 00:53
  • Yeah I had tried several single digits numbers and even at one point removed the max attribute of the input element. I can't seem to understand why it doesn't even come back as a value though to my JavaScript. If I changed the field to type='text' or removed the type attribute entirely it works though. So is there a better way than setting the input to a number field to keep users from only entering numbers? And then to guest271314, would my e in the number field be converted to that character and not be just e – stephen Jul 21 '17 at 04:25
  • First of all, your snippet is not real javascript, it's jQuery. I'm going to guess that inside of jQuery itself its core is trying to convert `e` to integer and fails to do so, falling back to empty string, for example. P.S. Pro tip: use debugger to retrieve more info about runtime in the moment your check happens. – webknjaz -- Слава Україні Jul 23 '17 at 15:19

0 Answers0