We Keep Coding

Number only html input reading as null to my javascript when 'e' is part of input

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?

How would I use javascript to validate an e-mail with output on the DOM?

Basically I created a form in html and when things are input properly it simply goes to google.com. Right now I have completed the first few fields but I am unsure of how I would make it recognize if the input that was put in and did not include an # sign or a . some point after it.
I created a fiddle as I was having trouble getting some of the longer of my lines of code to be in-line.
Click here for the fiddle Example

You have a few options depending on how thorougly you want to validate.
email.indexOf('#') >= 0
checks that there is an # at all in the email. See http://jsfiddle.net/27f1h6ws/ for a version of your fiddle with it added.
A more thorough way would be to check it with regex. You can do it extremely simple just checking the general structure of the email input, or extremely thorough check for all valid characters, depending on how crucial the validation is. See this link or the answers in this question for more information.

You can use HTML5 properties like :
pattern attribute which contains a regexp
set your input type to email
If you want to do it with JavaScript, use a regexp also and use the test() method to verify it.

Add this
var re = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
return re.test(email);

Optional Field validation

I am having some problem in JavaScript form validation.
I have some optional fields in my HTML code. On submit, they don't need to be filled up but if the user provides some input they must be verified. For instance, I have an optional phone number field. If the user provides an input then I need to check if they are all numbers.
How could I do that?

You need only invoke the validation code if the field value meets some precondition, in this case: if the field has a value (checked by testing the length property of the string value):
var fieldValue = document.getElementById("someInput").value;
if( fieldValue.length > 0 ) {
if( someValidationFunction( fieldValue ) ) alert("Field is invalid");
}

What's stopping you from using HTML5's own validation?
<input type="tel" pattern="[0-9]+" />
No JavaScript required, will work on all modern browsers.
A note on security: Please don't rely on client-side validations for security concerns, as they can be trivially disabled. All validation should also be done server-side.

you can bind your custom method as a callback to your submit action in your form
<form onSubmit="return customValidation()>
In the method do your validations.
function customValidation()
{
//code to test fields
fieldToValidate = document.getElementById("field-id")
//validate the field
}

You can't use the other answers if you need it to be more secure; you shouldn't do this with JavaScript, because if a user for some reason has it turned off in their browser (or they turned it off on purpose) then the form won't still be verified. Instead you need to do it with PHP on the server. On the server that the form is being sent to you need to get the query strings sent with the form ($_GET['phonenumber'];), and see if it's a number (int intval ( mixed $phonenumber )). This should return NaN if it's not a number.

Create Regex Pattern from Mask value to validate the zip code

JS Code:
I was using the following code for zip code validation for three countries USA/BR/CA.
/*To Get ZipCodeRegex as per country */
function getZipRegEx(inputcountry) {
var returntext;
if (inputcountry == "USA") {
returntext = /^\d{5}$/
}
else if (inputcountry == "CA") {
returntext = /^[ABCEGHJKLMNPRSTVXYabceghjklmnprstvxy]{1}\d{1}[A-Za-z]{1} *\d{1}[A-Za-z]{1}\d{1}$/
}
else if (inputcountry == "BR") {
returntext = /^([0-9]){5}([-])([0-9]){3}$/
}
return returntext;
};
Now, client has updated their code and using the MASK Plugin for input textbox. The mask pattern is rendering with data-mask attribute. Below is the rendered HTML for input control for zip code.
<input type="text" name="zip" id="zip" value="" class="required" data-mask="99999" />
Problem Area : Now with latest code base, they are covering more then 10 countries and each and every country/state is having different pattern for zip code.
So, is it possible to generate the regex pattern based on mask value coming with input field? This way, i need not to put the country specific checks.
Please suggest some implementation approach to cover this scenario.
Thanks in advance.

The MASK Plugin is already performing client-side validation of the entered ZIP code. That is what it is for. It doesn't make sense to duplicate that with your own client-side validation using Javascript.
Client side validation is just a convenience for the user anyway (reporting mistakes quickly so the user can correct them before the form is submitted); it never guarantees valid input, because it can be easily circumvented.
If you want to ensure good input, you must validate on the server side.

Email regex validation javascript

I do understand the problems with validating emails but I wonder whether this would block anyone that has a legal email.
I was looking for a list of valid emails to test it myself but did not find any.
Anyone have an email that is valid but this regex thinks it's not?
emailRegex.test('Emailing#domain.aero')
Very long line:
emailRegex = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(#((?:[\w-]+\.)*\w[\w-]{0,66})\.(([a-z]{2}|AERO|ARPA|ASIA|BIZ|CAT|COM|COOP|EDU|GOV|INFO|INT|JOBS|MIL|MOBI|MUSEUM|NAME|NET|ORG|PRO|TEL|TRAVEL|XN--0ZWM56D|XN--11B5BS3A9AJ6G|XN--3E0B707E|XN--45BRJ9C|XN--80AKHBYKNJ4F|XN--90A3AC|XN--9T4B11YI5A|XN--CLCHC0EA0B2G2A9GCD|XN--DEBA0AD|XN--FIQS8S|XN--FIQZ9S|XN--FPCRJ9C3D|XN--FZC2C9E2C|XN--G6W251D|XN--GECRJ9C|XN--H2BRJ9C|XN--HGBK6AJ7F53BBA|XN--HLCJ6AYA9ESC7A|XN--J6W193G|XN--JXALPDLP|XN--KGBECHTV|XN--KPRW13D|XN--KPRY57D|XN--LGBBAT1AD8J|XN--MGBAAM7A8H|XN--MGBAYH7GPA|XN--MGBBH1A71E|XN--MGBC0A9AZCG|XN--MGBERP4A5D4AR|XN--O3CW4H|XN--OGBPF8FL|XN--P1AI|XN--PGBS0DH|XN--S9BRJ9C|XN--WGBH1C|XN--WGBL6A|XN--XKC2AL3HYE2A|XN--XKC2DL3A5EE0H|XN--YFRO4I67O|XN--YGBI2AMMX|XN--ZCKZAH|XXX)(?:\.[a-z]{2})?)$)|(#\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)|(^$)/i;

Dominic Sayers has created a list of email edge cases that you could use to validate your test. You can find it here.
The valid address test#[IPv6:::], "test\ test"#iana.org or "test#io" are not accepted by your regex.

It's a beautiful expression, but soon to be relegated to the realm of obsolescence:
http://www.icann.org/en/topics/new-gtld-program.htm
Global Top Level Domains (yourbestfriend#worksfor.coke) are coming, and they'll break all of our scripts in a few years :)
Though, to answer your question, no, I was not able to break your email check using today's finite limit on "valid" domain extensions.

Here is the code for html input field and button field
<input input type="text" name="txtEmailId" id="txtEmailId" />
<input type="submit" class="button" value="Suscribe" name="Suscribe"
onclick="javascript:ShowAlert()" />
Now add the below function to the header of your page
<script type="text/javascript">
function ShowAlert() {
var email = document.getElementById('txtEmailId');
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email.value)) {
alert('Please provide a valid email address');
email.focus;
return false;
}
else {
alert("Thanks for your intrest in us, Now you
will be able to receive monthly updates from us.");
document.getElementById('txtEmailId').value = "";
}
}
</script>
Here you can find the article on this Email Validation in JavaScript