How to validate data entered into page controls (HTML form elements) by using JavaScript.
You can run this technique code from:
| |
See the chapter on advanced page topics in the Programmer's Guide |
The live example for this technique is a plain HTML file that shows how you can validate data entered into HTML form elements with some basic JavaScript. To do the same thing in SilverStream, you just need a slight variation, as described in the next section.
In the example, note that the Submit Information button does not call the validateForm() function. It just submits the information without checking.
In the Page Designer, you code the following in the Raw HTML window:
Related reading
<SCRIPT>
// Standard Browser Check
browserCheck = ((navigator.appName == "Microsoft Internet Explorer")
|| (navigator.appName == "Netscape"))
&& (parseInt(navigator.appVersion) >= 4);
</SCRIPT>
Then, you code the following in the JavaScript window:
method handle_Validate_onClick()
{
Page.validateForm();
}
method validateForm()
{
// Skip validation if the browser doesn't meet
// requirements.
if (!browserCheck)
return;
// Assign the values of the text fields to
// variables in the script.
userName = this.name.value;
emailAddy = this.emailAddress.value;
phoneNum = this.telephoneNumber.value;
// Assign the value of the choice box
drink = this.drinkChoice;
// Set the value of the topping variables to true
// if its counterpart is checked and to false
// if it isn't checked.
pepperoni = (this.pepperoni.checked);
sausage = (this.sausage.checked);
pineapple = (this.pineapple.checked);
cheese = (this.cheese.checked);
// Assign the contents of the text area
// to a variable in the script.
comments = this.comments.value;
// Start by making sure the user entered something
// in the name field. If they didn't, tell them,
// move the cursor into the name field, and
// do not submit the form.
if (userName == "") {
alert("You did not enter a name");
this.name.focus();
return;
}
// If you have made it here, then the text field
// has a value and now you need to check its format.
// Create a regular expression that checks for any
// number of characters, a comma, and then more characters.
// This pattern also remembers whatever comes before
// the comma and what comes after the comma and stores
// them into variables that you can use later.
pattern = /(\D+),(\D+)/;
// \D+ means any non-number character
// one or more times.
// Execute the regular expression on the name field.
// This is what actually stores those values into
// variables.
pattern.exec(userName);
// Create two more regular expressions to look for
// commas and spaces.
comma = /,/g;
whiteSpace = /\s/g;
// Test the first pattern to see if it matches
// the value of the name field. If it doesn't,
// tell the user, put the cursor in the name field,
// and do not submit the form.
if (!pattern.test(userName)) {
alert("You did not enter a name in the proper format:\n\n\tlast,first");
this.name.focus();
return;
}
// Now test the two stored variables to see if
// either of them contains a comma. This makes sure
// that there is only one comma in the name field.
if (comma.test(RegExp.$1) || comma.test(RegExp.$2)) {
alert("You can only have one comma in the name field.");
this.name.focus();
return;
}
// Test the two stored variables again to see if
// either of them contains spaces.
if (whiteSpace.test(RegExp.$1) || whiteSpace.test(RegExp.$2)) {
alert("You can not have spaces in your name.");
this.name.focus();
return;
}
// If the user has made it this far, they have passed
// the thorough name field validation. That was
// only the first field.
// Now make sure there is something in the email
// address field.
if (emailAddy == "") {
alert("You did not enter an email address");
this.emailAddress.focus();
return;
}
// Replace the regular expression pattern with a
// new pattern that you will use to test the
// validity of the email address. This pattern
// checks for any characters, @, more characters,
// a period, then finally more characters:
// user@some.host
// You could put in validity checks on the different
// parts of the email address. For instance, you
// could make sure that there is only one @ in the
// field. The procedure is the same as the name
// field.
pattern = /.*\@.*\..*/;
// Now perform the test on the email field's value.
if (!pattern.test(emailAddy)) {
alert("You did not enter an email address in the proper format:\n\n\tuser@some.host");
this.emailAddress.focus();
return;
}
// Check to make sure there is something in the
// telephone number field.
if (phoneNum == "") {
alert("You did not enter a telephone number");
this.telephoneNumber.focus();
return;
}
// Again, replace the pattern with a new pattern
// that checks to make sure the phone number
// is in the correct format:
// xxx-xxx-xxxx
// \d{3} means any three numbers.
pattern = /\d{3}-\d{3}-\d{4}/;
// Test this pattern on the telephone number
// field.
if (!pattern.test(phoneNum)) {
alert("The telephone number you entered is not in the proper format:\n\n\txxx-xxx-xxxx");
this.telephoneNumber.focus();
return;
}
// Check to make sure that one of the
// radio buttons has been checked.
if (!coke.checked && !pepsi.checked) {
alert("You did not choose either Coke or Pepsi.");
return;
}
// Check to make sure that at least one of the
// checkboxes has been checked.
if (!pepperoni && !sausage && !pineapple && !cheese) {
alert("You did not choose a favorite topping.");
return;
}
// Check to make sure that if the 'Just Cheese'
// checkbox is checked, none of the other
// checkboxes are checked.
if (cheese && (pepperoni || sausage || pineapple)) {
alert("If you just like cheese, then you can not choose other toppings.");
return;
}
// Now make sure that the comments text area has
// something in it.
if (comments == "") {
alert("You did not enter any comments.");
this.comments.focus();
return;
}
// Check the length of the comments to make sure
// that it is long enough.
if (comments.length < 100) {
alert("You did not enter a long enough comment.");
this.comments.focus();
return;
}
// If the script got to here, that means that the
// form is valid and you can submit the information.
alert("Validation OK.");
}