This function will check for very basic user mistakes such as @ sign and .com and stuff.

// function to validate email address
function validateEmail(elementValue){
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
return emailPattern.test(elementValue);
}
// end email address validator

Use it like this in your code where ever you need it….

if (validateEmail(student_class_instructor_email) == false) {alert(“Error, please check the instructor email address for proper syntax.”); return false;}

a really bad ass way to display the error alert , especially in foundation, is to change the alert() to a prepend of the form or even the element that had the error…

alert(“Error…)
$(‘#foundationform’).prepend(“Error, please check the  email address for proper syntax.”);

if you have foundation you can use the error box built in with a close button .. just wrap it around the error message

<div class=’alert-box alert’>Error, please check the  email address for proper syntax.<a href=” class=’close’>&times;</a></div>

Here are some techniques that I use to loop through a form , access the elements and validate the field.

Here is one that will look for any field with an id, and require it. Then it will display the error message using the label of the field. sick!

function checkForm() {
        // begin basic form validation
        // check for empty fields name. adress etc.
        var str = '';
        var elem = document.getElementById('golf_reg_form').elements;
        for(var i = 0; i < elem.length; i++)
        {
           if(elem[i].value=="" && elem[i].id!==""){
            var myelem = elem[i];
            dalabel = $( elem[i] ).prev().html();
            alert("Please fill in  " + dalabel);
            //$( elem[i] ).val("error");-- note "A"
            return false;
            } 

        } 

    } // end form validation funk

note “A”: — here is where you could set some responsive disclosure ui features to help user know where the error is.

<script type="text/javascript">
    function DisplayFormValues()
    {
        var str = '';
        var elem = document.getElementById('frmMain').elements;
        for(var i = 0; i < elem.length; i++)
        {
            str += "<b>Type:</b>" + elem[i].type + "&nbsp&nbsp";
            str += "<b>Name:</b>" + elem[i].name + "&nbsp;&nbsp;";
            str += "<b>Value:</b><i>" + elem[i].value + "</i>&nbsp;&nbsp;";
            str += "<BR>";
        } 
        document.getElementById('lblValues').innerHTML = str;
    }
</script>

Update: I have figured out how to access this elem[i] using jquery.

$( elem[i] ).val(“error”);

Here is how to remove the error display when the user begins to correct it.
// this is to remove an error message after the user corrects it.
function typeIn(i, a)  {

if (document.sports_recruitment_form.elements[i].className==”error”) {

document.sports_recruitment_form.elements[i].className = ” “;

}

Then I can use selectors and apply the event handler to required fields: onclick=”typeIn(this.name, this.value)”

I could use jquery to loop through the form if I wanted to have more precision selectors like choosing only checkboxes, or even only checked checkboxes.

Here is a great example of how to select inputs from a large form, all elements have been named in groups, and setting each one with a unique id would be a waste of time.Instead, just give the container a unique id, and then access the child elements using jquery’s powerful selectors.

<div class=”six columns disclose” id=”golfer1″>

<label>First</label><input name=”team” type=”text” size=”24″/>

<label>Last</label><input name=”team” type=”text” size=”24″  />

<label>Email</label><input name=”team” type=”text” size=”40″ />

<label>Phone</label><input name=”team” type=”text” size=”16″ />

</div>

for(var allfields=0; allfields<=$(“#golfer1 :input”).length-1;allfields++){
alert($(“#golfer2 input:eq(“+allfields+”)”).val());
}

This code will loop through and detect the value of any input elements within the parent container. From there we could create some validation or whatever we want to do with the data.

UPDATE: after years of practice, I have concluded that the name and id should be set as so: <label>Phone</label><input name=”Phone Number” type=”text” id=”phone” size=”16″ /> then the labels and/or placeholders could be created dynamically from the name.

// set the placeholder of every text input to equal its name attribute
$(“form :input[type=’text’]”).each(function(){
$( this ).attr(“placeholder”, $( this).attr(“name”));
});

The 90’s saw many inovations in the web, but not much changed in the way of client side storage. Javascript and cookies were the way to keep user data saved in the browser.

Recently various techniques for storing and retrieving data have emerged. There are so many different ways in fact that we need to answer some questions to determine the best solution for persisting data between requests.

We have to ask who needs the data ? How long does the data need to be persisted?  And how large is the set of data?

Application

Session

This is a summary of a microsoft developer network article. that was updated in 2005.

Now lets get into the new technology

Here is my personal test file http://itwebdev.mv.skagit.edu/don/stuff/dom%20storage/domstorage.html

DOM storage, also called Web Storage is comprable to cookies. However, web storage offers more control of  how the information is stored and accesed by each window.

This technique also offers a lot more storage space, and quite different functionality than cookies.

The web storage scripting objects have been drafted into the HTML 5 working draft specifications, and have gathered major vendor support.

window.sessionStorage
Session storage is designed for scenarios where the user is carrying out a single transaction. The sessionStorage attribute of the window object maintains key/value pairs for all pages loaded during the lifetime of a single tab (for the duration of the top-level browsing context). For example, a page might have a check box that the user selects to indicate that he wants insurance. A later page could then check, from script, whether the user had selected the check box.

The Storage object supports expando properties (‘insurance’ in the preceding example). If the property name does not exist, a key/value pair is automatically created to hold it. Note that key/value pairs are always stored as strings. Different data types such as numbers, Boolean values, and structured data must be converted to strings before persisting to a storage area.

After a value has been saved to sessionStorage, it can be retrieved by script running in another page in the same context. When another document is loaded,sessionStorage is initialized from memory for same-origin URLs

Note  Although it is allowed by the HTML5 (Working Draft), Internet Explorer 8 does not resume sessionStorage after browser crash recovery.

window.localStorage

The local storage mechanism spans multiple windows and persists beyond the current session. The localStorage attribute provides persistent storage areas for domains. It allows Web applications to store nearly 10 MB of user data, such as entire documents or a user’s mailbox, on the client for performance reasons.

here is the msdn article that this blog post sumarrizes http://msdn.microsoft.com/en-us/library/cc197062(v=vs.85).aspx