validation is a pain!

i went to office hours again, where erik very graciously stayed longer to help.

i chose option 3 which is to make forms.  there needs to be five fields.  the process looked like this:

1.  Structure and formatting

spent a goodly amount of time aligning and fixing the length of text fields.  I created a new html file, “A4_forms.html”.  it is essentially a new page added onto the previous assignment’s website.  it is titled, “Join Cirque”, with text fields for name, address(street, city, state, zip) and phone.  erik helped me straighten out the disgusting quirks.  previously, i had made div boxes solely for the purpose of appearance.  so there were random boxes floating in random places.  though at the time, it was a nice, easy way to organize, now, it came around to haunt me.  because i had specified so many lengths, heights, and widths to make them all match up, if i tried to add anything new, everything would go berserk on me.  and so erik guided me in getting rid of specified margin lengths and div box locations- using margin-left/right: auto, letting things be flexible.

one observation is that what with the actual html files, javascript files and CSS files… i’m getting very confused where to find certain bits of information.  although it’s much better than it would without the distinctions.  i know that CSS is where all my div tags and formatting are.  my javascript is where all the functions are.  and my new html for forms contains all the input text field and button tags.  but it’s still a lot of pages to shuffle through.

2. Functions and If-Statements

so, once i had the text fields in place, i had to focus on getting them to have some functionality.  i made the former alert button link to the new html page with the forms.  i put id tags on everything.  the overall form with all the text fields, i called it ‘form id= “textfields” ‘.  then in my javascript file, i called the function checkForm() which is linked to the “Submit” button.  within the checkForm() function, i grabbed the element, “textfields” by ID and created a bunch of if-statements.

the if statements checked to make sure there was input in each text field.  if there isn’t anything, it would reset the entire thing and popup an alert box telling you to fill it out.  i used many || statements to include multiple factors required for a successful filling out of the text field.

objects really are very useful.  i called things like: “textfields.name.value”, realizing that “value” is what the user types in.  later, when the function to be executed when the submit button is pressed, i created a new object.  it looks like this:

function dosubmit()
{
var personal = new Object();
personal.name = textfields.name.value;
personal.street = textfields.street.value;
personal.city = textfields.city.value; …

}

3.  Print and Validation

i passed the object ‘personal’ into another function devoted to printing out the user’s input out to the page.  i used the innerHTML to do this.  it looks like this:

confirmation.innerHTML =
“name:  “+personal.name+”<br>”+”<br>”+
“address:  “+”<br>”+personal.street+”<br>”+ …

it looks a bit messy but i suppose it does the job.  i formatted the margins and color in the CSS file.

i was able to validate whether the fields are empty, even the number of characters allowed in the state, zip and phone number fields.

so my biggest problem now as of Feb. 5, tuesday 7:36pm, is determining whether the input are numbers or letters only.  it’s infuriating!  the examples online are confusing and it doesn’t seem to apply.  also, whenever i change one little thing, my navigation div box suddenly disappears.  it doesn’t make any sense to me.  i’m afraid to change anything because it all seems so precarious.