JavaScript Forum

**LayneMitch** · 09-16-2008, 10:39 AM

Hello.

Sorry folks. This is a rather long one. I would be very greatful for any suggestions for this. The form validation is supposed to do the following:

Here's the code:

The form:

Code:

<html><head><title>MyForm</title>
<script src="Problem16.js">
</script>
<style type="text/css">

.formstyle {position: absolute; 
            left: 260px;
            top: 30px;
            background-color: darkblue;
        padding-top:150px;
        padding-bottom:50px;
         }

.textstyle {
            font-family: Arial; 
        font-size: 11px; 
        color: white;
           }

#messagestyle {position:absolute;
               left: 75px;
               top: 15px;
               border: solid 2px black; 
               color: lightblue;
              }


</style>
</head>
<body bgColor="black" onLoad="attachHandlers();">
        <div class="formstyle">
    <div id="message"></div>
    <form action="mailto:bainksta@yahoo.com" method="post">
    <table>
        <tr>
            <td>
                <label for="Name" class="textstyle">Your Name:
                <input type="text" name="Name" id="the_name" size="20">
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label for="Email" class="textstyle">E-mail Address:
                <input type="text" name="Email" id="the_email" size="20">
                </label>
            </td>
        </tr>
        <tr>
            <td>
            <span class="textstyle">Please select a city:</span>
            <select name="city" id="myselections">
                <option selected="selected">(none)</option>
                <option value="Chicago">Chicago</option>
                <option value="Atlanta">Atlanta</option>
                <option value="D.C.">Wash D.C.</option>
                <option value="New York">Chicago</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>
                <label for="beauty" class="textstyle" id="target1">Who Do You Like More:
                <input type="radio" name="beauty" value="Halle" size="2" id="radiochoice">Halle Berry
                <input type="radio" name="beauty" value="Beyonce Knowles" size="2">Beyonce Knowles
                <input type="radio" name="beauty" value="Rosario Dawson" size="2">Rosario Dawson
                <input type="radio" name="beauty" value="Jessica Alba" size="2" id="breakpoint">Jessica Alba
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label for="dish" class="textstyle">What's Your Favorite Dish:<br>
                <input type="checkbox" name="dish" value="fish" size="2">Fish<br>
                <input type="checkbox" name="dish" value="chicken" size="2" id="checkchoice">Chicken<br>
                <input type="checkbox" name="dish" value="sphagetti" size="2" id="mainchkbox">Sphagetti<br>
                <input type="checkbox" name="dish" value="rice" size="2">Rice
                </label>
            </td>
        <tr>
        <tr>
            <td>
                <input type="submit" value="send form" id="my_button">
            </td>
        </tr>
    </table>
    </form>
    </div>
</body>
</html>

The script:

Code:

<script type="text/javascript">

var error = new createerror();

var errors = new Array();
errors[0]="Namefield has either blank spaces or been left blank. Please fill in.";
errors[1]="Emailfield has either blank spaces or been left blank. Please fill in.";
errors[2]="Field has illegal characters. Please fill in letters only.";
errors[3]="Not a valid email address.";
errors[4]="Please select an city.";
errors[5]="Please select at least one favorite dish.";

function createerror(){

this.val=0;
return this;
} 

function attachHandlers(){
var the_button = document.getElementById("my_button");
the_button.onclick=checkFormFields;

var radio_sel = document.getElementById("radiochoice");
radio_sel.onclick=addRadioOpts;

var chkbox_sel = document.getElementById("checkchoice");
chkbox_sel.onclick=addCheckOpts;

}

function addRadioOpts(){

var newrow = document.createElement("tr");
var newcell1 = document.createElement("td");
var newcell2 = document.createElement("td");

var newInput1 = document.createElement("input");
newInput1.setAttribute("type", "radio");
newInput1.setAttribute("name", "movie");
newInput1.setAttribute("size", "2");
newInput1.setAttribute("class", "textstyle"); 
var nameText1 = document.createTextNode("Swordfish");

var newInput2 = document.createElement("input");
newInput2.setAttribute("type", "radio");
newInput2.setAttribute("name", "movie");
newInput2.setAttribute("size", "2");
newInput2.setAttribute("class", "textstyle");
var nameText2 = document.createTextNode("Perfect Stranger");

newInput1.appendChild(nameText1);
newInput2.appendChild(nameText2);
newInput1.appendChild(newInput2);

newcell2.appendChild(newInput1);


newcell1.appendChild(newcell2);
newrow.appendChild(newcell1);

var the_table = document.getElementsByTagName("table")[0];
var the_label = document.getElementById("target1");
var my_row = the_label.parentNode.parentNode;


the_table.insertBefore(newrow, my_row);

var radio_opts = document.getElementsByTagName("input");

  for (var i=0; i < radio_opts.length; i++)
  {
    if (radio_opts[i].nodeName.toLowerCase()=="input")
    {   
      if (radio_opts[i].name="beauty")
      {
        radio_opts[i].onChange=function(){the_table.removeChild(newrow);}
      }
    }
  }

}

function addCheckOpts(){


var newInput3 = document.createElement("input");
newInput3.setAttribute("type", "radio");
newInput3.setAttribute("name", "choice");
newInput3.setAttribute("size", "2");
newInput3.setAttribute("class", "textstyle"); 
var nameText3 = document.createTextNode("chicken'n'pasta");

var newInput4 = document.createElement("input");
newInput4.setAttribute("type", "radio");
newInput4.setAttribute("name", "choice");
newInput4.setAttribute("size", "2");
newInput4.setAttribute("class", "textstyle");
var nameText4 = document.createTextNode("chicken'n'potatoes");

newInput3.appendChild(nameText3);
newInput4.appendChild(nameText4);
newInput3.appendChild(newInput4);


var my_table = document.getElementsByTagName("table")[0];
var the_box = document.getElementById("mainchkbox");

my_table.insertBefore(newInput3, the_box);

var chicken_sel = document.getElementById("checkchoice");

chicken_sel.onchange=function(){my_table.removeChild(newInput3);}
   
}


function checkFormFields()
{

  var first_field = document.getElementById("the_name");
  var sec_field = document.getElementById("the_email");
  var the_sel = document.getElementById("myselections");
  var sel_opt = the_sel.options[the_sel.selectedIndex];
  var my_inputs = document.getElementsByTagName("input");

  for (var i=0; i < my_inputs.length; i++)
  {
    if (my_inputs[i].nodeName.toLowerCase()=="input")
    {
      if (my_inputs[i].name=="beauty")
      {
    var radio_boxes = my_inputs[i];
      }

      if (my_inputs[i].name=="dish")
      {
    var chk_boxes = my_inputs[i];
      }
    }
  }

  var correct;
  var error_mes="";

  correct=checkBlank(first_field.value, error);
  
  if (!correct)
  {
    error_mes += errors[error.val] + "\n";
    first_field.focus();
    return false;
  }

  correct=checkEmailBlank(sec_field.value, error); 
  
  if (!correct)
  {
    error_mes += errors[error.val] + "\n";
    sec_field.focus();
    return false;
  }
    
  correct=checkValidEmail(sec_field.value, error); 
  
  if (!correct)
  {
    error_mes += errors[error.val] + "\n";
    sec_field.focus();
    return false;
  }
  
  correct=checkIllegalChars(first_field.value, error); 
  
  if (!correct)
  {
    error_mes += errors[error.val] + "\n";
    first_field.focus();
    return false;
  }
       
  correct=checkSelOpts(sel_opts, error); 
  
  if (!correct)
  {
    error_mes += errors[error.val] + "\n";
    sel_opts.focus();
    return false;
  }

  correct=checkCheckedOpts(chk_boxes, error); 
  
  if (!correct)
  {
    error_mes += errors[error.val] + "\n";
    first_field.focus();
    return false;
  }

  displayErrors(error_mes);
  return true;
  
}

function checkBlank(the_name, error){

 if (the_name.length==0)
 {
   error.val=0;
   return false;
 }

 for(var i=0; i < the_name.length; i++){
 
   if (the_name.charAt(i)!="" && the_name.charAt(i)!="\t"){
   return true;
   }
 }

 error.val=0;
 return false;
}


function checkEmailBlank(the_email, error){

 if (the_email.length==0)
 {
   error.val=1;
   return false;
 }

 for(var i=0; i < the_email.length; i++){
 
   if (the_email.charAt(i)!="" && the_email.charAt(i)!="\t"){
   return true;
   }
 }

 error.val=1;
 return false;
}


function checkValidEmail(user_email, error){

  var my_regexp = /^[\w\.\-]+@([\w\-]+\.)+[a-zA-Z]+$/;

  if (!my_regexp.test(the_email))
  {
   error.val=3;
   return false;
  }

  return true;
}


function checkIllegalChars(theuser_name, error){

  var name_exp = /[a-zA-Z]+/;
  
  for(var i=0; i < theuser_name.length; i++)
  {
    var the_char = theuser_name.charAt(i);
    
    if (!name_exp.text(the_char))
    {
      error.val=2;
      return false;
    }
    
    return true; 
  }
}

function checkSelOpts(city_opts, error){

 if (city_opts!= -1 && city_opts.value !="none")
 {
   return true;
 }

  error.val=4;
  return false;
}

function checkCheckedOpts(check_boxes, error){

 for(var i=0; i < check_boxes.length; i++)
 {
   var ones_chkd = check_boxes[i].checked;

   if(!ones_chkd)
   {
     error.val=5;
     return false;
   }
 }

 return true;
}

function displayErrors(the_errors){

  var the_field=document.getElementById("message");
  var the_fieldId = the_field.getAttribute("id");
  
  the_field.replace(the_fieldId, "messagestyle");
 
  the_field.appendChild(the_errors);
}

</script>

Once again, any help or advice is appreciated. I'm new to JavaScript and this is my longest script thus far.

**chrishirst** · 09-16-2008, 01:26 PM

Quote:

Sorry folks. This is a rather long one. I would be very greatful for any suggestions for this. The form validation is supposed to do the following:

Ok bit of info missing here I would say.

what is it supposed to do? and what is it doing? or not as the case maybe

**LayneMitch** · 09-17-2008, 10:21 AM

Quote:

Originally Posted by chrishirst

Ok bit of info missing here I would say.

what is it supposed to do? and what is it doing? or not as the case maybe

Hello Chris,

The form is supposed to do the following:

* Check that each field has been filled in
* The text fields do not contain illegal characters (hyphens, dots, spaces, slashes, and symbols).
* The email address has the appropriate positioning for the "@" and the "."
* Make sure something is selected for the radio and checkbox options.
* Choose one radio option and one check box option that has a dependent and display it if the parent is selected.

I've been working on it for a week now. I have made updates which I'll post separately.

**LayneMitch** · 09-17-2008, 10:24 AM

Code:

<html><head><title>MyForm</title>
<script type="text/javascript">

var error = new createerror();

var errors = new Array();
errors[0]="Namefield has either blank spaces or been left blank. Please fill in.";
errors[1]="Emailfield has either blank spaces or been left blank. Please fill in.";
errors[2]="Field has illegal characters. Please fill in letters only.";
errors[3]="Not a valid email address.";
errors[4]="Please select an city.";
errors[5]="Please select at least one favorite dish.";

function createerror(){

this.val=0;
return this;
} 

function attachHandlers(){
var the_button = document.getElementById("my_button");
the_button.onclick=function(){return checkFormFields();};

var radio_sel = document.getElementById("radiochoice");
radio_sel.onclick=addRadioOpts;

var chkbox_sel = document.getElementById("checkchoice");
chkbox_sel.onclick=addCheckOpts;

}

function addRadioOpts(){

var newrow = document.createElement("tr");
var newcell1 = document.createElement("td");
var newcell2 = document.createElement("td");

var newInput1 = document.createElement("input");
newInput1.setAttribute("type", "radio");
newInput1.setAttribute("name", "movie");
newInput1.setAttribute("size", "2");
newInput1.setAttribute("class", "textstyle"); 
var nameText1 = document.createTextNode("Swordfish");

var newInput2 = document.createElement("input");
newInput2.setAttribute("type", "radio");
newInput2.setAttribute("name", "movie");
newInput2.setAttribute("size", "2");
newInput2.setAttribute("class", "textstyle");
var nameText2 = document.createTextNode("Perfect Stranger");

newcell1.appendChild(newInput1);
newcell1.appendChild(nameText1);
newcell2.appendChild(newInput2);
newcell2.appendChild(nameText2);

newrow.appendChild(newcell1);
newrow.appendChild(newcell2);

var the_table = document.getElementsByTagName("table")[0];
var the_label = document.getElementById("target1");
var my_row = the_label.parentNode.parentNode;


the_table.insertBefore(newrow, my_row);

var radio_opts = document.getElementsByTagName("input");

  for (var i=0; i < radio_opts.length; i++)
  {
    if (radio_opts[i].nodeName.toLowerCase()=="input")
    {   
      if (radio_opts[i].name="beauty")
      {
        radio_opts[i].onChange=function(){the_table.removeChild(newrow);}
      }
    }
  }

}

function addCheckOpts(){


var newInput3 = document.createElement("input");
newInput3.setAttribute("type", "radio");
newInput3.setAttribute("name", "choice");
newInput3.setAttribute("size", "2");
newInput3.setAttribute("class", "textstyle"); 
var nameText3 = document.createTextNode("chicken'n'pasta");

var newInput4 = document.createElement("input");
newInput4.setAttribute("type", "radio");
newInput4.setAttribute("name", "choice");
newInput4.setAttribute("size", "2");
newInput4.setAttribute("class", "textstyle");
var nameText4 = document.createTextNode("chicken'n'potatoes");

newInput3.appendChild(nameText3);
newInput4.appendChild(nameText4);
newInput3.appendChild(newInput4);


var my_table = document.getElementsByTagName("table")[0];
var the_box = document.getElementById("mainchkbox");

my_table.insertBefore(newInput3, the_box);

var chicken_sel = document.getElementById("checkchoice");

chicken_sel.onchange=function(){my_table.removeChild(newInput3);}
   
}


function checkFormFields()
{

  var first_field = document.getElementById("the_name");
  var sec_field = document.getElementById("the_email");
  var the_sel = document.getElementById("myselections");
  var sel_opt = the_sel.options[the_sel.selectedIndex];
  var my_inputs = document.getElementsByTagName("input");

  for (var i=0; i < my_inputs.length; i++)
  {
    if (my_inputs[i].nodeName.toLowerCase()=="input")
    {
      if (my_inputs[i].name=="beauty")
      {
    var radio_boxes = my_inputs[i];
      }

      if (my_inputs[i].name=="dish")
      {
    var chk_boxes = my_inputs[i];
      }
    }
  }

  var correct;
  var error_mes="";

  correct=checkBlank(first_field.value, error);
  
  if (!correct)
  {
    error_mes += errors[error.val] + '<br>';
    first_field.focus();
    //return false;
  }

  correct=checkEmailBlank(sec_field.value, error); 
  
  if (!correct)
  {
    error_mes += errors[error.val] + '<br>';
    sec_field.focus();
    //return false;
  }
    
  correct=checkValidEmail(sec_field.value, error); 
  
  if (!correct)
  {
    error_mes += errors[error.val] + '<br>';
    sec_field.focus();
    //return false;
  }
  
  correct=checkIllegalChars(first_field.value, error); 
  
  if (!correct)
  {
    error_mes += errors[error.val] + '<br>';
    first_field.focus();
    //return false;
  }
       
  correct=checkSelOpts(sel_opt, error); 
  
  if (!correct)
  {
    error_mes += errors[error.val] + '<br>';
    sel_opts.focus();
    //return false;
  }

  correct=checkCheckedOpts(chk_boxes, error); 
  
  if (!correct)
  {
    error_mes += errors[error.val] + '<br>';
    first_field.focus();
    //return false;
  }

  if(error_mes!="") 
  {
    displayErrors(error_mes);
    return false;
  }
  return true;

}

function checkBlank(the_name, error){

 if (the_name.length==0)
 {
   error.val=0;
   return false;
 }

 for(var i=0; i < the_name.length; i++){
 
   if (the_name.charAt(i)!="" && the_name.charAt(i)!="\t"){
   return true;
   }
 }

 error.val=0;
 return false;
}


function checkEmailBlank(the_email, error){

 if (the_email.length==0)
 {
   error.val=1;
   return false;
 }

 for(var i=0; i < the_email.length; i++){
 
   if (the_email.charAt(i)!="" && the_email.charAt(i)!="\t"){
   return true;
   }
 }

 error.val=1;
 return false;
}


function checkValidEmail(user_email, error){

  var my_regexp = /^[\w\.\-]+@([\w\-]+\.)+[a-zA-Z]+$/;

  if (!my_regexp.test(the_email))
  {
   error.val=3;
   return false;
  }

  return true;
}


function checkIllegalChars(theuser_name, error){

  var name_exp = /[a-zA-Z]+/;
  
  for(var i=0; i < theuser_name.length; i++)
  {
    var the_char = theuser_name.charAt(i);
    
    if (!name_exp.text(the_char))
    {
      error.val=2;
      return false;
    }
  }
  
  return true;
}

function checkSelOpts(city_opts, error){

 if (city_opts!= -1 && city_opts.value !="none")
 {
   return true;
 }

  error.val=4;
  return false;
}

function checkCheckedOpts(check_boxes, error){

 for(var i=0; i < check_boxes.length; i++)
 {
   var ones_chkd = check_boxes[i].checked;

   if(!ones_chkd)
   {
     error.val=5;
     return false;
   }
 }

 return true;
}


function displayErrors(the_errors){
  var the_field=document.getElementById("message"); 
  the_field.innerHTML=the_errors;
}



</script>

<style type="text/css">

.formstyle {position: absolute; 
            left: 260px;
            top: 30px;
            background-color: darkblue;
        padding-top:150px;
        padding-bottom:50px;
         }

.textstyle {
            font-family: Arial; 
        font-size: 11px; 
        color: white;
           }

#messagestyle {position:absolute;
               left: 75px;
               top: 15px;
               border: solid 2px black; 
               color: lightblue;
              }


</style>
</head>
<body bgColor="black" onLoad="attachHandlers();">
        <div class="formstyle">
    <div id="message"></div>
    <form action="mailto:bainksta@yahoo.com" method="post">
    <table>
        <tr>
            <td>
                <label for="Name" class="textstyle">Your Name:
                <input type="text" name="Name" id="the_name" size="20">
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label for="Email" class="textstyle">E-mail Address:
                <input type="text" name="Email" id="the_email" size="20">
                </label>
            </td>
        </tr>
        <tr>
            <td>
            <span class="textstyle">Please select a city:</span>
            <select name="city" id="myselections">
                <option selected="selected">(none)</option>
                <option value="Chicago">Chicago</option>
                <option value="Atlanta">Atlanta</option>
                <option value="D.C.">Wash D.C.</option>
                <option value="New York">Chicago</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>
                <label for="beauty" class="textstyle" id="target1">Who Do You Like More:
                <input type="radio" name="beauty" value="Halle" size="2" id="radiochoice">Halle Berry
                <input type="radio" name="beauty" value="Beyonce Knowles" size="2">Beyonce Knowles
                <input type="radio" name="beauty" value="Rosario Dawson" size="2">Rosario Dawson
                <input type="radio" name="beauty" value="Jessica Alba" size="2" id="breakpoint">Jessica Alba
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label for="dish" class="textstyle">What's Your Favorite Dish:<br>
                <input type="checkbox" name="dish" value="fish" size="2">Fish<br>
                <input type="checkbox" name="dish" value="chicken" size="2" id="checkchoice">Chicken<br>
                <input type="checkbox" name="dish" value="sphagetti" size="2" id="mainchkbox">Sphagetti<br>
                <input type="checkbox" name="dish" value="rice" size="2">Rice
                </label>
            </td>
        <tr>
        <tr>
            <td>
                <input type="submit" value="send form" id="my_button">
            </td>
        </tr>
    </table>
    </form>
    </div>
</body>
</html>

This is everything together...no imported script files. Highlighted in blue is what's different from the original code.

**nyef** · 09-17-2008, 02:09 PM

That's a lot to read through...

What exactly is broken about it?

You realize of course that you need to perform this validation again server-side if you don't want people submitting invalid information to your database...

Clientside checks like these can be bypassed very easily.

**LayneMitch** · 09-18-2008, 10:15 AM

Quote:

Originally Posted by nyef

That's a lot to read through...

What exactly is broken about it?

You realize of course that you need to perform this validation again server-side if you don't want people submitting invalid information to your database...

Clientside checks like these can be bypassed very easily.

Yes, I have been told that, but this is only so I'll know as much about JavaScript as possible. This is only a problem that I'm testing myself on.

Apparently, there's quite a few things I've could've done better as I've been told on other forums. This is a lot to read through and the most difficult problem I've had thus far. I've been learning JavaScript for about 7 mos now. I read two books first and began coding around July. Once I get through this example, an example on generating events by mouse location, creating a shopping cart, and finally a shared-to-do list, then I should be good to go.

If you do have the time, to look through this bundle of code I would really appreciate that. Thanks

**nyef** · 09-19-2008, 03:17 PM

Well like I said what's not working about it?