We Keep Coding

Validating numeric values using JavaScript

I have the following code. It works fine for blank fields, but it doesn't catch the other numeric exceptions. What am I doing wrong?
function validateForm() {
var a = document.forms["Form"]["percentage"].value;
var b = document.forms["Form"]["minutes"].value;
if (a == null || b == null || a == "" || b == "") {
alert("Please Fill All Required Field");
return false;
} else if (isNan(a) == true || isNan(b) == true) {
alert("Please enter valid numeric values");
return false;
} else if (parseInt(a) > 100) {
alert("Percentage can't exceed 100");
return false;
} else if (parseInt(b) < 0 || parseInt(a) < 0) {
alert("Values can't be negative");
return false;
}
}

Change this line:
else if((isNan(a)==true) ||(isNan(b)==true)){
to this:
else if (isNaN(a) || isNaN(b)) {
as the function is named #isNaN(). Using == true in conditionals is quite redundant, so I removed them.
I have also made a fiddle for you. It contains the fixed code, and it is working well.

How do I correctly perform form validation in JavaScript?

I am having a hard time trying to do a correct form validation. I have Name, Email, and Phone Number fields. I implemented the validation check for all of them and when I click on the submit query, it returns email as false, but not anything else. It also will still submit the form. How do I fix this?
JSFiddle: http://jsfiddle.net/GVQpL/
JavaScript Code:
function validateForm(/*fullName, email, phoneNumber*/)
{
//-------------------------NAME VALIDATION-----------------------------//
var fullNameV = document.forms["queryForm"]["fullName"].value;
if (fullNameV == null || fullNameV == "")
{
alert("Name must be filled out!");
return false;
}
else if(fullNameV.indexOf(" ") <= fullNameV.length)
{
alert("Not a valid name");
return false;
}
//-------------------------EMAIL VALIDATION-----------------------------//
var emailV = document.forms["queryForm"]["email"].value;
if (emailV == null || emailV == "")
{
alert("Email must be filled out!");
return false;
}
var atpos = emailV.indexOf("#");
var dotpos = emailV.lastIndexOf(".");
if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length)
{
alert("Not a valid e-mail address");
return false;
}
//-------------------------PHONE # VALIDATION-----------------------------//
var phoneNumberV = document.forms["queryForm"]["phoneNumber"].value;
if (phoneNumberV == null || phoneNumberV == "")
{
alert("Phone Number must be filled out!");
return false;
}
var error = "";
var stripped = phoneNumberV.replace(/[\(\)\.\-\ ]/g, '');
if (phoneNumberV == "")
{
error = alert("You didn't enter a phone number.\n");
phoneNumberV.style.background = 'Yellow';
}
else if (isNaN(parseInt(stripped)))
{
error = alert("The phone number contains illegal characters.\n");
phoneNumberV.style.background = 'Yellow';
}
else if (!(stripped.length == 10))
{
error = alert("The phone number is the wrong length. Make sure you included an area code.\n");
phoneNumberV.style.background = 'Yellow';
}
return error;
}

Update your fiddle's html for the function to be called onsubmit="return validateForm()" and removed the required="required" changed your function to work, you can see it here:
http://jsfiddle.net/GVQpL/3/
function validateForm(/*fullName, email, phoneNumber*/)
{
//-------------------------NAME VALIDATION-----------------------------//
var fullNameV = document.forms["queryForm"]["fullName"].value;
if (fullNameV == null || fullNameV == "")
{
alert("Name must be filled out!");
document.forms["queryForm"]["fullName"].focus();
return false;
}
else if(fullNameV.indexOf(" ") >= fullNameV.length)
{
alert("Not a valid name");
document.forms["queryForm"]["fullName"].focus();
return false;
}
//-------------------------EMAIL VALIDATION-----------------------------//
var emailV = document.forms["queryForm"]["email"].value;
if (emailV == null || emailV == "")
{
alert("Email must be filled out!");
document.forms["queryForm"]["email"].focus();
return false;
}
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(emailV)){
alert("Not a valid e-mail address");
document.forms["queryForm"]["email"].focus();
return false;
}
//-------------------------PHONE # VALIDATION-----------------------------//
var phoneNumberV = document.forms["queryForm"]["phoneNumber"].value;
if (phoneNumberV == null || phoneNumberV == "")
{
alert("Phone Number must be filled out!");
document.forms["queryForm"]["phoneNumber"].focus();
return false;
}
var error = "";
var stripped = phoneNumberV.replace(/[\(\)\.\-\ ]/g, '');
if (phoneNumberV == "")
{
alert("You didn't enter a phone number.\n");
document.forms["queryForm"]["phoneNumber"].focus()
document.forms["queryForm"]["phoneNumber"].style.background = 'Yellow';
return false;
}
else if (isNaN(parseInt(stripped)))
{
alert("The phone number contains illegal characters.\n");
document.forms["queryForm"]["phoneNumber"].focus();
document.forms["queryForm"]["phoneNumber"].style.background = 'Yellow';
return false;
}
else if (!(stripped.length == 10))
{
alert("The phone number is the wrong length. Make sure you included an area code.\n");
document.forms["queryForm"]["phoneNumber"].focus();
document.forms["queryForm"]["phoneNumber"].style.background = 'Yellow';
return false;
}
if(!confirm('Are you sure you want to submit your DSLR query?')){
return false;
}
return true;
}

Radio button validation causing rest of validation to fail

The radio validation works but then the rest don't. What have I done wrong?
function validateRadio(radios) {
for (i = 0; i < radios.length; ++i) {
if (radios[i].checked) return true;
}
return false;
}
function validateForm() {
if (validateRadio(document.forms["pancettaForm"]["updateShip"])) {
return true;
} else {
alert("Please tell us how you would like to update your order.");
return false;
}
}
var x = document.forms["pancettaForm"]["order-number"].value;
if (x == null || x == "") {
alert("Please provide your order number.");
return false;
}
var x = document.forms["pancettaForm"]["full-name"].value;
if (x == null || x == "") {
alert("Please provide your full name, or the recipients name if you are updating shipping information.");
return false;
}
var x = document.forms["pancettaForm"]["phone"].value;
if (x == null || x == "") {
alert("Please provide a phone number in case of delivery questions.");
return false;
}
var display = document.getElementById('address').style.display;
if (display == 'block') {
var x = document.forms["pancettaForm"]["address"].value;
if (x == null || x == "") {
alert("Please provide your address.");
return false;
}
}
var display = document.getElementById('city').style.display;
if (display == 'block') {
var x = document.forms["pancettaForm"]["city"].value;
if (x == null || x == "") {
alert("Please provide your city.");
return false;
}
}
var display = document.getElementById('state').style.display;
if (display == 'block') {
if (document.pancettaForm.state.value == "- Select State -") {
alert("Please provide your state.");
return false;
}
}
var display = document.getElementById('zip').style.display;
if (display == 'block') {
var x = document.forms["pancettaForm"]["zip"].value;
if (x == null || x == "") {
alert("Please provide your zip code.");
return false;
}
}
var display = document.getElementById('newShipDate').style.display;
if (display == 'block') {
if (document.pancettaForm.state.value == "- Select Date -") {
alert("Please choose your new shipping date.");
return false;
}
}

Just reverse the test so you do not have to return
if(!validateRadio (document.forms["pancettaForm"]["updateShip"]))
{
alert("Please tell us how you would like to update your order.");
return false;
}
// continue
You had the end bracket after the test of the radios so the rest of the script just floated in cyberspace
Also return true only once at the end and do not have var x multiple times and be consistent in how you access the form elements and I also fixed your date test which was testing state
function validateForm() {
var x,display,form = document.forms["pancettaForm"];
if (!validateRadio(form["updateShip"])) {
alert("Please tell us how you would like to update your order.");
return false;
}
x = form["order-number"].value;
if (x == null || x == "") {
alert("Please provide your order number.");
return false;
}
x = form["full-name"].value;
if (x == null || x == "") {
alert("Please provide your full name, or the recipients name if you are updating shipping information.");
return false;
}
x = form["phone"].value;
if (x == null || x == "") {
alert("Please provide a phone number in case of delivery questions.");
return false;
}
display = form["address"].style.display;
if (display == 'block') {
x = form["address"].value;
if (x == null || x == "") {
alert("Please provide your address.");
return false;
}
}
display = form["city"].style.display;
if (display == 'block') {
x = form["city"].value;
if (x == null || x == "") {
alert("Please provide your city.");
return false;
}
}
display = form['state'].style.display;
if (display == 'block') {
x = form['state'].value;
if (x == "- Select State -") {
alert("Please provide your state.");
return false;
}
}
display = form['zip'].style.display;
if (display == 'block') {
x = form["zip"].value;
if (x == null || x == "") {
alert("Please provide your zip code.");
return false;
}
}
display = form["newShipDate"].style.display;
if (display == 'block') {
x = form["newShipDate"].value;
if (x.value == "- Select Date -") {
alert("Please choose your new shipping date.");
return false;
}
}
return true;
}

Why is my form not validating on submit? [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I have a sign up form on my page at http://business.uglyopportunities.com/affiliate-signup/ (scroll down to see the form)
Keep in mind, I am not very good with JS so this may be a simple error.
Anyways, here is the first line of my form telling it to validate:
<form accept-charset="UTF-8" action="xxxxx" class="infusion-form" method="POST" name="myform" onsubmit="return validateForm();">
and here is my validateForm javascript:
<script type="text/javascript">
function validateForm() {
var a = document.forms["myform"]["inf_field_FirstName"].value;
var b = document.forms["myform"]["inf_field_Email"].value;
var c = document.forms["myform"]["inf_field_Phone1"].value;
var d = document.forms["myform"][" inf_field_StreetAddress1"].value;
var e = document.forms["myform"][" inf_field_City"].value;
var f = document.forms["myform"][" inf_field_State"].value;
var g = document.forms["myform"][" inf_field_PostalCode"].value;
var h = document.forms["myform"][" inf_other_Username"].value;
var i = document.forms["myform"][" inf_other_Password"].value;
var j = document.forms["myform"][" inf_other_RetypePassword"].value;
if (a == null || a == "" || a == "First Name Here") {
alert("Please enter your First Name!");
return false;
}
if (c == null || c == '' || c == "Enter Your Phone Here" || c.length < 9) {
alert("Please insert your phone number!");
return false;
}
if (d == null || d == '' || d == "Street Address”) {
alert("Please insert your street address ");
return false;
}
if (e == null || e == '' ||e == "City”) {
alert("Please insert your city");
return false;
}
if (f == null || f == '' || f == "State”) {
alert("Please insert your state ");
return false;
}
if (g == null || g == '' ||g == "Postal Code”) {
alert("Please insert your postal code");
return false;
}
if (h == null || h == '' || h == "Username”) {
alert("Please insert your username ");
return false;
}
if (i == null || i == '' ||i == "password”) {
alert("Please insert your password");
return false;
}
if (j == null || j == '' || j == "password”) {
alert("Please re - type your password ! ");
return false;
}
var emailRegEx = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (document.myform.inf_field_Email.value.search(emailRegEx) == -1) {
alert("Please enter a valid email address.");
return false;
}
}
</script>
and that is not working. However, when I used this code, it worked fine:
<script type="text/javascript">
function validateForm() {
var a=document.forms["myform"]["inf_field_FirstName"].value;
var b=document.forms["myform"]["inf_field_Email"].value;
var c=document.forms["myform"]["inf_field_Phone1"].value;
if (a==null || a=="" || a=="First Name Here") {
alert("Please enter your First Name!");
return false;
}
if (c==null || c==''|| c=="Enter Your Phone Here" || c.length < 9) {
alert("Please insert your phone number!");
return false;
}
var emailRegEx = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (document.myform.inf_field_Email.value.search(emailRegEx) == -1) {
alert("Please enter a valid email address.");
return false;
}
}
</script>
UPDATED CODE *
<script type="text/javascript">// <![CDATA[
function validateForm() {
var a = document.forms["myform"]["inf_field_FirstName"].value;
var b = document.forms["myform"]["inf_field_Email"].value;
var c = document.forms["myform"]["inf_field_Phone1"].value;
var d = document.forms["myform"]["inf_field_StreetAddress1"].value;
var e = document.forms["myform"]["inf_field_City"].value;
var f = document.forms["myform"]["inf_field_State"].value;
var g = document.forms["myform"]["inf_field_PostalCode"].value;
var h = document.forms["myform"]["inf_other_Username"].value;
var i = document.forms["myform"]["inf_other_Password"].value;
var j = document.forms["myform"]["inf_other_RetypePassword"].value;
if (a == null || a == "" || a == "First Name Here") {
alert("Please enter your First Name!");
return false;
}
if (c == null || c == '' || c == "Enter Your Phone Here" || c.length < 9) {
alert("Please insert your phone number!");
return false;
}
if (d == null || d == '' || d == "Street Address") {
alert("Please insert your street address ");
return false;
}
if (e == null || e == '' ||e == "City") {
alert("Please insert your city");
return false;
}
if (f == null || f == '' || f == "State") {
alert("Please insert your state ");
return false;
}
if (g == null || g == '' ||g == "Postal Code") {
alert("Please insert your postal code");
return false;
}
if (h == null || h == '' || h == "Username") {
alert("Please insert your username ");
return false;
}
if (i == null || i == '' ||i == "password") {
alert("Please insert your password");
return false;
}
if (j == null || j == '' || j == "password") {
alert("Please re - type your password ! ");
return false;
}
var emailRegEx = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (document.myform.inf_field_Email.value.search(emailRegEx) == -1) {
alert("Please enter a valid email address.");
return false;
}
}
// ]]>
</script>

You have a white space here:
var d = document.forms["myform"][" inf_field_StreetAddress1"].value;
// ^-----------------------
You have the same problem with for e,f,g,h,i,j
Also, you used the wrong quotes sign:
"Street Address”
// ^--------------
You did it several times.

As gdoron says, it's probably an spelling problem. You cannot begin the name of an element with a whitespace http://www.w3.org/TR/html401/types.html#type-name

capturing the element in javascript

i would like to display the error message in the input element itself instead of showing an error message separately. how would i capture the element in which the message needs to be displayed?
this the code:
function checkForm(form) {
if (yname.getValue() == "" || yname.getValue() == "Your Name" || name.getValue() == "" || name.getValue() == "Name of the Book" || url.getValue() == "" || url.getValue() == "URL of the Book"){
[id-of-the-element].setTextValue("Field cannot be empty!");
return false;
}

You can "extend" your condition statement:
function checkForm(form) {
var result = true;
if (yname.getValue() == "" || yname.getValue() == "Your Name") {
setErrorMessage(yname);
result = false;
} else if (name.getValue() == "" || name.getValue() == "Name of the Book") {
setErrorMessage(yname);
result = false;
} else if (url.getValue() == "" || url.getValue() == "URL of the Book") {
setErrorMessage(yname);
result = false;
}
return result;
}
function setErrorMessage(field) {
field.setTextValue("Field cannot be empty!");
}

this is plain java script code if you are not using jquery
document.getElementById("id-of-the-element").value = "Field cannot be empty!";