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

An exciting addition to web development arsenal is the Google Web Fonts api. The problem with fonts onthe web was that many computers dont have the same fonts, as they vary from system to system. http://www.google.com/webfonts

Elaborate on this, do some demos and release the post.

They say to start by choosing some fonts to add to a collection, then you dl the files.

The interface for choosing fonts is great. you can sort and filter the fonts depending on what you need for your project.Then you add them to a collection with the touch of a button.

Serifs, the tiny decorations on the tips of the letters, usually dont work well on screens, so they dont get used on webpages as often as sans. I am going to build a collection of serif fonts that look good onthe screen, so I can use them on some pages.

Well after i finished building a collection, they say that using too many will impact page load times. You should only choose the one or two you want for your web page.There is a cool web page load time meter that will show you if you have chosen too many fonts.So, I uncheck ed the boxes until i was left with my favorite two fonts, and they don’t have a huge impact on load  time.

Then, just add this link to your document  <link href=’http://fonts.googleapis.com/css?family=Metamorphous|Cagliostro’ rel=’stylesheet’ type=’text/css’>

Lastly, just add the font to a style statement like this example:

Example:

h1 { font-family: ‘Metamorphous’, Arial, serif; font-weight: 400; }

I need to make a 1 time use required interactive prompt.  part of web assistant duties state compliance issue.

This will require..

content container.

Place the content into a div container. Give it a unique id, and set it’s  display:none.

<div  id=”myprompt”  style=”display:none” >Here is my exciting and important content. It needs your response.This will interrupt your user flow until you respond.</div>

This is in mysvc.asp

external styling.

I make a custom style for the div container give it a good location, and  to make it look important. Style the top, left, width, height, borders text  and background to match the theme.

This is a style defined  in mysvcdb.css as promptstyle.

interactive response form.

This is the content for the prompt. It is a question that needs a response, the best use for a web form, no? Make a standard web form for now. In the content container in mysvc.asp

Asp  form capture logic.

This will be the logic to capture the user response to the form. you can use your flavor of server side languages. Im using classic asp here. Benjy whipped this up and i made a few changes

The file is votereg.asp

Javascript Logic

to Show and hide the content based on the user interaction.

Storage of user interaction results

So no repeat. Could use  user request.cookie…dom storage … User preference database storage.

Logic to check user compliance to requirements at login.

check cookie or db storage for compliance.

There are some great uses for changing an objects class via script. One of them is form elements. To create a better user experience, and guide them through the form, we can change the elements based on classes to show, hide and highlight the path way for the user.

To add a class to an element:

document.getElementById("MyElement").className += " MyClass"; 

To remove a class from an element:

document.getElementById("MyElement").className =    document.getElementById("MyElement").className.replace       ( /(?:^|s)MyClass(?!S)/g , '' ) /* code wrapped for readability - above is all one statement */ 

To do that in an onclick event:

<script type="text/javascript">     function changeClass()     {         // code examples from above     } </script> ... <button onclick="changeClass()">My Button</button> 

Better yet, use a framework (in this example jQuery) which allows you to do the following:

$j('#MyElement').addClass('MyClass'); $j('#MyElement').removeClass('MyClass'); $j('#MyElement').toggleClass('MyClass'); 

And also:

<script type="text/javascript">     function changeClass()     {         // code examples from above     }     $j(':button:contains(My Button)').click(changeClass); </script> ... <button>My Button</button>