Subscription form user input validation

[lord_alan]

Hi,

On our website (http://www.theopenlearningcentre.com/re ... ation.html) we have an nice form for users to subscribe to our newsletter. I noticed that the error reporting back from OpenEMM is not very verbose. There also didn't seem to be away to get much information back to the user to help them either.

I have just added a small javascript validation routine to the form (default name en_doi) which seems to work OK.

Here's the javascript:

Code: Select all

// Simple javascript routine to check for empty fields and a valid email 
// address. Originally for use with a subscription form for the OpenEMM 
// Email Marketing Application.
// Author: alan dot lord at theopenlearningcentre dot com
// License GNU GPL: http://www.gnu.org/licenses/gpl.txt
// Date 04/02/2009

// Trim leading and trailing whitespace
String.prototype.trim = function() {
    a = this.replace(/^\s+/, '');
    return a.replace(/\s+$/, '');
};

function validate(){
	var str = document.en_doi.email.value;
	var fn = document.en_doi.fname.value;
	var ln = document.en_doi.lname.value;

    // Regular Expression courtesy of http://www.freshmango.com/support/kb/web-design-programming/javascript/javascript-email-validation-with-regular-expressions/	
    var rgxp = new RegExp(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+[a-zA-Z0-9]{2,4}$/);
	if(fn.trim() == ''){
        alert('Please enter your first name.');
        return false;
    }
    else if(ln.trim() == ''){
		alert('Please enter your last name.');
		return false;
	}
    else if(str.trim() == ''){
        alert('Please enter a valid email address.');
        return false;
    }	
	if (rgxp.test(str)) {
		document.en_doi.submit();
	}
	else
	{	
		alert('Please check your email address. It seems invalid.');
		return false;
	}	
}

The form en_doi I have also changed. We use a tableless layout and external CSS for presentation. You also need to edit the "submit" button to be a regular button instead.

Here is the xhtml for our form:

Code: Select all

<script type="text/javascript" language="javascript" src="http://url-to-my-script.com/js/validate.js"></script>
<link rel="stylesheet" href="http://url-to-my-stylesheet.com/openemm.css" type="text/css" />
<form name="en_doi" action="form.do" method="post">
  <input type="hidden" name="agnCI" value="1"/>
  <input type="hidden" name="agnFN" value="en_doi_confirm"/>
  <input type="hidden" name="agnSUBSCRIBE" value="1"/>
  <input type="hidden" name="agnMAILINGLIST" value="5"/>
  <fieldset><legend>Newsletter Registration</legend>
    <div id="height-bar"></div>
    <div class="notes">
      <h4>Register</h4>
      <p>Use this registration form to receive our email newsletter.</p>
      <p>Liberation is sent intermittently and contains news, tips and advice on Free and Open Source Software.</p><p><strong>All fields are mandatory.</strong></p>
    </div>
    <div class="row">
      <label for="salutation">Salutation:</label>
      <select id="salutation" class="formw" name="GENDER">
        <option selected="selected" value="0">Mr.</option>
        <option value="1">Ms.</option>
        <option value="2">Company</option>
      </select>
    </div>
    <div class="row">
      <label for="fname">Firstname:</label>
      <input id="fname" class="formw" type="text" name="FIRSTNAME" size="40"/>
    </div>
    <div class="row">
      <label for="lname">Lastname:</label>
      <input id="lname" class="formw" type="text" name="LASTNAME" size="40"/>
    </div>
    <div class="row">
      <label for="email">eMail:</label>
      <input id="email" class="formw" type="text" name="EMAIL" size="40"/>
    </div>
    <div class="row sub">
      <fieldset>
        <legend>eMail format:</legend>
        <input type="radio" name="MAILTYPE" value="1" checked="checked"/><span>HTML</span>
        <input type="radio" name="MAILTYPE" value="0" /><span>Text</span>
      </fieldset>
    </div>
    <div class="row buttons">
     <input type="button" value="Submit &raquo;" onClick="validate();"/>
     <input type="reset" value="Reset"/>
    </div>
  </fieldset>
</form>

I hope this is helpful and if anyone has any better ideas or suggestions for improvement, do comment please.