File: example1.html

Recommend this page to a friend!
  Classes of Pierre FAUQUE  >  PHP JavaScript Form Validation  >  example1.html  >  Download  
File: example1.html
Role: Example script
Content type: text/plain
Description: Example 1 (copy/paste)
Class: PHP JavaScript Form Validation
Output form validation JavaScript from a INI file
Author: By
Last change: Correction :
<form method="post" ...
instead of
<form mathod="post" ...
Date: 2 months ago
Size: 16,567 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Subscription</title>

<!--
  the JS class configured with the member $tocopy = 1, read the subscription.ini file
  to generate the javascript script below corresponding to the form. The script has
  been copied and pasted into the page.
// -->

<script language="javascript" type="text/javascript">

// (c) Pierre FAUQUE : js script (feb 2006), php class (jul 2020)
// The fonctions is...() return TRUE or FALSE
// The functions isValid...() return "OK" or an "Error message"

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Return TRUE if the given character (c) is in the authorized list (list) and FALSE if not
function isCharInList(c,list) {
	var c,list;
	if (list.indexOf(c.toLowerCase()) < 0) { return false; } else { return true; }
}

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Return TRUE if all characters of the (str)ing are in the authorized (list), FALSE if not
function isStringInList(str,list) {
	var str,list,n;
	for (n=0; n<str.length; n++) {
		if (!isCharInList(str.substring(n,n+1),list)) { return false; }
	}
	return true;
}

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Return TRUE if the given characters correspond to a valid TLD, FALSE if not
function isTLD(tld) {
	var tld,domains;
	domains = "com|net|int|org|edu|mil|gov|af|al|dz|as|ad|ao|ai|aq|ag|ar|am|aw|ac|au|at|"
	        + "az|bh|bd|bb|by|be|bz|bj|bm|bt|bo|ba|bw|bv|br|io|bn|bg|bf|bi|gg|je|kh|cm|ca|"
	        + "cv|ky|td|cl|cn|cx|cc|co|km|cg|ck|cr|ci|hr|cf|cu|cy|cz|dk|dj|dm|do|tp|ec|eg|"
	        + "sv|gq|er|ee|et|fk|fo|fj|fi|gf|pf|tf|fr|fx|ga|gm|ge|de|gh|gi|gr|gl|gd|gp|gu|"
	        + "gt|gn|gw|gy|ht|hm|hn|hk|hu|is|in|id|ir|iq|ie|im|il|it|jm|jp|jo|kz|ke|ki|kp|"
	        + "kr|kw|kg|la|lv|lb|ls|lr|ly|li|lt|lu|mo|mk|mg|mw|my|mv|ml|mt|mh|mq|mr|mu|yt|"
	        + "mx|fm|md|mc|mn|ms|ma|mz|mm|mp|na|nr|np|an|nl|nc|nz|ni|ne|ng|nu|nf|no|om|pk|"
	        + "pw|pa|pg|py|pe|ph|pn|pl|pt|pr|qa|re|ro|ru|rw|gs|lc|ws|sm|st|sa|sn|sc|sl|sg|"
	        + "sk|si|sb|so|za|es|lk|sh|kn|pm|vc|sd|sr|sj|sz|se|ch|sy|tw|tj|tz|th|bs|tg|tk|"
	        + "to|tt|tn|tr|tm|tc|tv|um|ug|ua|uk|us|uy|ae|uz|vu|va|ve|vn|vg|vi|wf|eh|ye|yu|"
	        + "zr|zm|zw|eu|"
	        + "biz|info|aero";
	if (domains.indexOf(tld.toLowerCase()) < 0) { return false; } else { return true; }
}

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Return TRUE if the format of the email address is correct, FALSE if not
// Login not null, must contain "@", a dot in the domain (not null) and a valid TLD
function isEmail(address) {
	var address,parts,domains;
	if (address.indexOf("@") <= 0)         { return false; }
	parts = address.split("@");
	if (parts[0].length == 0)              { return false; }
	if (parts[1].indexOf(".") <= 0)        { return false; }
	domains = parts[1].split(".");
	if (!isTLD(domains[domains.length-1])) { return false; }
	return true;
}

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Return TRUE if the date format is correct (fr: DD/MM/YYYY), FALSE if not
function isDate(date) {
	var date, reg = new RegExp("^[0-9]{2}[/]{1}[0-9]{2}[/]{1}[0-9]{4}$","g");
	if(reg.test(date)) { return true; } else { return false; }
}

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Return TRUE if the hour format is correct (HH:MN), FALSE if not
function isHour(hour) {
	var tab, reg = new RegExp("^[0-9]{2}[:]{1}[0-9]{2}$","g");
	if(reg.test(hour)) { return true; } else { return false; }
}

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Return "OK" if the date has a good format (fr: DD/MM/YYYY)or an "Error message"
function isValidDate(date) {
	var date,tab;
	if(isDate(date)) {
		tab=date.split('/');
		if((tab[0]*1)<1 || (tab[0]*1)>31) { return "Incorrect day !"; }
		if((tab[1]*1)<1 || (tab[1]*1)>12) { return "Incorrect month !"; }
		if((tab[2]*1)<1) { return "Incorrect year !"; }
		return "OK";
	}
	return "Incorrect date format !";
}

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Return "OK" if the hour has a good format (HH:MN) or an "Error message"
function isValidHour(hour) {
	var hour, tab;
	if(isHour(hour)) {
		tab=hour.split(':');
		if((tab[0]*1)<0   || (tab[0]*1)>24) { return "Incorrect hours !"; }
		if((tab[1]*1)<0   || (tab[1]*1)>60) { return "Incorrect minutes !"; }
		if((tab[0]*1)==24 && (tab[1]*1)!=0) { return "Max is 24h !"; }
		return "OK";
	}
	return "Incorrect hour format !";
}

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Tests the validity of a text (length and authorized characters). "OK" or "Error message"
function isValidText(field,chars,li,ls) {
	var field,chars,li,ls,lg,msg;
	lg = field.length;
	if(li || ls) {
		if(lg < li) { msg = "Too short input:\nMin : "+li; return msg; }
		if(lg > ls) { msg = "Too long input:\nMax : "+ls; return msg; }
	}
	if(!isStringInList(field,chars)) { msg = "Forbidden characters !"; return msg; }
	return "OK";
}

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// Definition of basic characters
var ascii   = "abcdefghijklmnopqrstuvwxyz";
var letters = "abcdefghijklmnopqrstuvwxyz";
var digits  = "0123456789";

// Authorized Characters
var ac_lname = letters + " '-";
var ac_fname = letters + " '-";
var ac_email = ascii + digits + "@-_+.";
var ac_phone = digits + ".- +";
var ac_cont = digits + ",.";
var ac_obs = letters + digits + "&\"' ()[]{}-_\\@+-*/?!,.;/:\n\$%=";


function verif() {

	// Fields value (14 fields)
	var lname = document.subscription.lname.value;
	var fname = document.subscription.fname.value;
	var bday = document.subscription.bday.value;
	var email = document.subscription.email.value;
	var phone = document.subscription.phone.value;
	var cont = document.subscription.cont.value;
	var idrol = document.subscription.idrol.options[document.subscription.idrol.options.selectedIndex].value;
	var begdate = document.subscription.begdate.value;
	var prefh = document.subscription.prefh.value;
	var obs = document.subscription.obs.value;

	// ----- Last name, text. Required
	if(!lname) {
		alert("Last name : missing");
		document.subscription.lname.focus();
		return false;
	}
	msg = isValidText(lname,ac_lname,2,25);
	if(msg != "OK") {
		alert("Last name : "+msg);
		document.subscription.lname.focus();
		return false;
	}

	// ----- First name, text. Required
	if(!fname) {
		alert("First name : missing");
		document.subscription.fname.focus();
		return false;
	}
	msg = isValidText(fname,ac_fname,2,30);
	if(msg != "OK") {
		alert("First name : "+msg);
		document.subscription.fname.focus();
		return false;
	}

	// ----- Sex, radio. Required
	check=0;
	for(i=0; i<document.subscription.sex.length; i++) {
		if(document.subscription.sex[i].checked) {
			sex = document.subscription.sex[i].value;
			check = 1;
		}
	}
	if(check === 0) {
		alert("Sex : Not checked");
		return false;
	}

	// ----- Birthday, text/date. Required
	if(!bday) {
		alert("Birthday : missing");
		document.subscription.bday.focus();
		return false;
	}
	msg = isValidDate(bday);
	if(msg != "OK") {
		alert("Birthday : "+msg);
		document.subscription.bday.focus();
		return false;
	}

	// ----- eMail Address, text/mail. Optional
	if(email) {
		msg = isValidText(email,ac_email,6,50);
		if(msg != "OK") {
			alert("eMail Address : "+msg);
			document.subscription.email.focus();
			return false;
		}
		if(!isEmail(email)) {
			msg = "Incorrect email address format !";
			alert("eMail Address : "+msg);
			document.subscription.email.focus();
			return false;
		}
	}

	// ----- Phone number, text. Optional
	if(phone) {
		msg = isValidText(phone,ac_phone,10,20);
		if(msg != "OK") {
			alert("Phone number : "+msg);
			document.subscription.phone.focus();
			return false;
		}
	}

	// ----- Level of studies, radio. Required
	check=0;
	for(i=0; i<document.subscription.studies.length; i++) {
		if(document.subscription.studies[i].checked) {
			studies = document.subscription.studies[i].value;
			check = 1;
		}
	}
	if(check === 0) {
		alert("Level of studies : Not checked");
		return false;
	}

	// ----- Sports, checkbox. Required
	nb = 0;
	if(document.subscription.athl.checked) { nb++; }
	if(document.subscription.volley.checked) { nb++; }
	if(document.subscription.foot.checked) { nb++; }
	if(document.subscription.swim.checked) { nb++; }
	if(document.subscription.none.checked) { nb++; }
	if(!nb) {
		alert("Sports : At least one choice !");
		return false;
	}

	// ----- Contribution, text/num. Required
	if(!cont) {
		alert("Contribution : missing");
		document.subscription.cont.focus();
		return false;
	}
	msg = isValidText(cont,ac_cont,1,6);
	if(msg != "OK") {
		alert("Contribution : "+msg);
		document.subscription.cont.focus();
		return false;
	}
	if(500 > 100) {
		if(cont*1 <= 100 || cont*1 >= 500) {
			alert("Contribution : Out of limits");
			document.subscription.cont.focus();
			return false;
		}
	}

	// ----- Role, list. Required
	if(idrol == "null") {
		alert("Role : missing");
		document.subscription.idrol.focus();
		return false;
	}

	// ----- Beginning date, text/date. Required
	if(!begdate) {
		alert("Beginning date : missing");
		document.subscription.begdate.focus();
		return false;
	}
	msg = isValidDate(begdate);
	if(msg != "OK") {
		alert("Beginning date : "+msg);
		document.subscription.begdate.focus();
		return false;
	}

	// ----- Prefered hour, text/hour. Optional
	if(prefh) {
		msg = isValidHour(prefh);
		if(msg != "OK") {
			alert("Prefered hour : "+msg);
			document.subscription.prefh.focus();
			return false;
		}
	}

	// ----- Observations, text. Required
	if(!obs) {
		alert("Observations : missing");
		document.subscription.obs.focus();
		return false;
	}
	msg = isValidText(obs,ac_obs,1,2000);
	if(msg != "OK") {
		alert("Observations : "+msg);
		document.subscription.obs.focus();
		return false;
	}

	// ----- Validation, checkbox/valid . Required
	nb = 0;
	if(document.subscription.ok.checked) { nb++; }
	if(!nb) {
		alert("Validation : You must validate to continue !");
		return false;
	}

	return true;

}
</script>
<style type="text/css">
h1  { font-family:times; font-size:20pt; font-style:italic; color:#000080; }
.c1 { padding-left:6px; padding-right:6px; vertical-align:top; border:1px solid grey; text-align:center; background-color:#000080; color:#FFFFFF; }
.c2 { padding-left:6px; padding-right:6px; vertical-align:top; border:1px solid grey; border-left:0px; text-align:center; background-color:#000080; color:#FFFFFF; }
.c3 { padding-left:6px; padding-right:6px; padding-top:2px; padding-bottom:2px; vertical-align:top; border:1px solid grey; border-top: 0px; text-align:right; }
.c4 { padding-left:6px; padding-right:6px; padding-top:2px; padding-bottom:2px; vertical-align:top; border:1px solid grey; border-left:0px; border-top: 0px; }
.c5 { padding-left:6px; padding-right:6px; border:1px solid grey; text-align:center; background-color:#909090; color:#000000; font-style:italic; }
.c6 { padding-left:6px; padding-right:6px; border:1px solid grey; border-left:0px; text-align:center; background-color:#D0D0D0; color:#000090; font-style:italic; }
</style>
</head>

<body>
<h1>Sports club registration</h1>

<p>Generated script copied and pasted into the page</p>

<form method="post" name="subscription" action="javascript:alert('All is OK. Form sent !')" onsubmit="return verif()">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
  <td class="c1">Label</td>
  <td class="c2">Value</td>
  <td class="c5">html</td>
  <td class="c5">JS class</td>
</tr><tr>
  <td class="c3">Last name</td>
  <td class="c4"><input type="text" name="lname" size="25"></td>
  <td class="c6">text</td>
  <td class="c6">text</td>
</tr><tr>
  <td class="c3">First name</td>
  <td class="c4"><input type="text" name="fname" size="25"></td>
  <td class="c6">text</td>
  <td class="c6">text</td>
</tr><tr>
  <td class="c3">Sex</td>
  <td class="c4"><input type="radio" name="sex" value="M">Male<br/><input type="radio" name="sex" value="M">Female</td>
  <td class="c6">radio</td>
  <td class="c6">radio</td>
</tr><tr>
  <td class="c3">Birthday</td>
  <td class="c4"><input type="text" name="bday" size="10"> (DD/MM/YYYY)</td>
  <td class="c6">text</td>
  <td class="c6">date</td>
</tr><tr>
  <td class="c3">eMail Address</td>
  <td class="c4"><input type="text" name="email" size="55"></td>
  <td class="c6">text</td>
  <td class="c6">mail</td>
</tr><tr>
  <td class="c3">Phone number</td>
  <td class="c4"><input type="text" name="phone" size="12"></td>
  <td class="c6">text</td>
  <td class="c6">text</td>
</tr><tr>
  <td class="c3">Level of studies</td>
  <td class="c4">
    <input type="radio" name="studies" value="0">Primary school<br/>
    <input type="radio" name="studies" value="0">High scool<br/>
    <input type="radio" name="studies" value="0">University
  </td>
  <td class="c6">radio</td>
  <td class="c6">radio</td>
</tr><tr>
  <td class="c3">Sports</td>
  <td class="c4">
    <input type="checkbox" name="athl" value="at">Athletism<br/>
    <input type="checkbox" name="volley" value="vo">Volley ball<br/>
    <input type="checkbox" name="foot" value="fo">Football<br/>
    <input type="checkbox" name="swim" value="s">Swimming<br/>
    <input type="checkbox" name="none" value="no">None<br/>
  </td>
  <td class="c6">checkbox</td>
  <td class="c6">checkbox</td>
</tr><tr>
  <td class="c3">Contribution</td>
  <td class="c4"><input type="text" name="cont" size="10"> &nbsp; ($100 < contrib. < $500)</td>
  <td class="c6">text</td>
  <td class="c6">num</td>
</tr><tr>
  <td class="c3">Role</td>
  <td class="c4">
    <select name="idrol">
      <option value="null">--- Choose a role</option>
      <option value="pl">Player</option>
      <option value="ar">Arbitrator</option>
      <option value="ma">Manager</option>
      <option value="co">Coach</option>
    </select>
  </td>
  <td class="c6">select</td>
  <td class="c6">list</td>
</tr><tr>
  <td class="c3">Beginning date</td>
  <td class="c4"><input type="text" name="begdate" size="10"> (DD/MM/YYYY)</td>
  <td class="c6">text</td>
  <td class="c6">date</td>
</tr><tr>
  <td class="c3">Prefered hour</td>
  <td class="c4"><input type="text" name="prefh" size="5"> (HH:MN)</td>
  <td class="c6">text</td>
  <td class="c6">hour</td>
</tr><tr>
  <td class="c3">Observations</td>
  <td class="c4"><textarea rows="5" cols="50" name="obs"></textarea></td>
  <td class="c6">textarea</td>
  <td class="c6">text</td>
</tr><tr>
  <td class="c3">Validation</td>
  <td class="c4"><input type="checkbox" name="ok" value="ok"> I have read the rules, I accept the conditions</td>
  <td class="c6">checkbox</td>
  <td class="c6">valid</td>
</tr>
</table>
<input type="submit" name="submit" value="Submit">
</form>
<pre>

#
# file: subscription.ini
#
[form]
name=subscription

[general]
; Country date (TLD, Top Level Domain)
ctrydate=fr
; hour: 4 = 4 digits (HH:MN) ; 6 = 6 digits (HH:MN:SS)
hour=4

[fields]
; fieldname,labelname,fieldtype,obligatory(1) or not(0),lgmin,lgmax
lname,Last name,text,1,2,25
fname,First name,text,1,2,30
sex,Sex,radio,1
bday,Birthday,date,1
email,eMail Address,mail,0,6,50
phone,Phone number,text,0,10,20
studies,Level of studies,radio,1
athl;volley;foot;swim;none,Sports,checkbox,1
cont,Contribution,num,1,1,6,1,500
idrol,Role,list,1
begdate,Beginning date,date,1
prefh,Prefered hour,hour,0
obs,Observations,text,1,1,2000
ok,Validation,valid,1

[chars]
; not for checked or selected controls (radio, checkbox, select)
; only for fields filled with characters except dates and hours)
lname=letters + " '-"
fname=letters + " '-"
email=ascii + digits + "@-_+."
phone=digits + ".- +"
cont=digits + ",."
obs=letters + digits + "&\"' ()[]{}-_\\@+-*/?!,.;/:\n\$%="
</pre>

<p>&nbsp;</p>
<p>&nbsp;</p>
</body>

</html>

For more information send a message to info at phpclasses dot org.