revision:
| First name: | ||
| Last name: | ||
| Email: | ||
| User ID: | ||
| Password: | ||
| Confirm password: | ||
<div class="spec">
<table id="table1" style="margin-left:1vw;">
<tr>
<td>First name:</td>
<!-- onkeyup: execute a JS when a user releases a key -->
<td><input type="text" id="first" onkeyup="validate();" /></td>
<td><div id="errFirst"></div></td>
</tr>
<tr>
<td>Last name:</td>
<td><input type="text" id="last" onkeyup="validate();"/></td>
<td><div id="errLast"></div></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" id="email" onkeyup="validate();"/></td>
<td><div id="errEmail"></div></td>
</tr>
<tr>
<td>User ID:</td>
<td><input type="text" id="uid" onkeyup="validate();"/></td>
<td><div id="errUid"></div></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="password" onkeyup="validate();"/></td>
<td><div id="errPassword"></div></td>
</tr>
<tr>
<td>Confirm password:</td>
<td><input type="password" id="confirm" onkeyup="validate();"/></td>
<td><div id="errConfirm"></div></td>
</tr>
<tr>
<!-- execute a JS when a button is clicked -->
<td><input type="button" id="create" value="Create" onclick="validate();
finalValidate();"/></td>
<td><div id="errFinal"></div></td>
</tr>
</table>
</div>
<script>
var divs = new Array();
divs[0] = "errFirst";
divs[1] = "errLast";
divs[2] = "errEmail";
divs[3] = "errUid";
divs[4] = "errPassword";
divs[5] = "errConfirm";
function validate(){
var inputs = new Array();
inputs[0] = document.getElementById('first').value;
inputs[1] = document.getElementById('last').value;
inputs[2] = document.getElementById('email').value;
inputs[3] = document.getElementById('uid').value;
inputs[4] = document.getElementById('password').value;
inputs[5] = document.getElementById('confirm').value;
var errors = new Array();
errors[0] = "<span style='color:red'>Please enter your first name!</span>";
errors[1] = "<span style='color:red'>Please enter your last name!</span>";
errors[2] = "<span style='color:red'>Please enter your email!</span>";
errors[3] = "<span style='color:red'>Please enter your user id!</span>";
errors[4] = "<span style='color:red'>Please enter your password!</span>";
errors[5] = "<span style='color:red'>Please confirm your password!</span>";
for (i in inputs) {
var errMessage = errors[i];
var div = divs[i];
if (inputs[i] == "")
document.getElementById(div).innerHTML = errMessage;
else if (i==2) {
var atpos=inputs[i].indexOf("@");
var dotpos=inputs[i].lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=inputs[i].length)
document.getElementById('errEmail').innerHTML = "<span style='color: red'>
Enter a valid email address!</span>";
else
document.getElementById(div).innerHTML = "OK!";
}
else if (i==5) {
var first = document.getElementById('password').value;
var second = document.getElementById('confirm').value;
if (second != first)
document.getElementById('errConfirm').innerHTML = "<span style='color: red'>
Your passwords don't match!</span>";
else
document.getElementById(div).innerHTML = "OK!";
}
else
document.getElementById(div).innerHTML = "OK!";
}
}
function finalValidate(){
var count = 0;
for(i=0;i<6;i++){
var div = divs[i];
if(document.getElementById(div).innerHTML == "OK!")
count = count + 1;
}
if(count == 6)
document.getElementById("errFinal").innerHTML = "All the data you entered
is correct!!!";
}
</script>
<div class="spec">
<form style="margin-left:1vw; width: 30vw;">
<div>
<label for="fname">First name: </label>
<input id="fname" type="text">
</div>
<div>
<label for="lname">Last name: </label>
<input id="lname" type="text">
</div>
<div>
<input id="submit" type="submit">
</div>
</form>
<p id="remind" style="margin-left:5vw; color:red"></p>
</div>
<script>
const form = document.querySelector('form');
const fname = document.getElementById('fname');
const lname = document.getElementById('lname');
const para = document.querySelector('#remind');
form.onsubmit = function(e) {
if(fname.value === '' || lname.value === '') {
e.preventDefault();
para.textContent = 'You need to fill in both names!'
}
}
</script>
<div class="spec">
<form name="f1">
<table>
<tr>
<td><input name="ta1" type="text" size="15"></td>
<td><input name="ta2" type="text" size="15"></td>
<td><input name="ta3" type="text" size="15"></td>
</tr>
</table>
</form>
<form name="f2" action="#" method="POST">
name <input name="pername" type="text" size="15"> name<p>
age <input name="perage" type="text" size="5"> age<P>
occupation <input name="perocc" type="text" size="15">occupation <P>
<input type="Submit" value="Submit">
<input type="Reset" value="Reset">
</form>
<form name="f3">
<table>
<tr>
<td><input name="ta4" type="text" size="15">
<td> <input name="ta5" type="text" size="15">
<td> <input name="ta6" type="text" size="15">
</tr>
</table>
</form>
</div>
<script language= "javascript">
setInterval("document.f1.ta1.value = 'Answer Soon'", 1000)
setInterval("document.f1.ta1.value = ''", 1300)
setInterval("document.f1.ta2.value = 'Answer Soon'", 1600)
setInterval("document.f1.ta2.value = ''", 1900)
setInterval("document.f1.ta3.value = 'Answer Soon'", 2200)
setInterval("document.f1.ta3.value = ''", 2500)
setInterval("document.f3.ta4.value = 'Answer Soon'", 2800)
setInterval("document.f3.ta4.value = ''", 3100)
setInterval("document.f3.ta5.value = 'Answer Soon'", 3400)
setInterval("document.f3.ta5.value = ''", 3700)
setInterval("document.f3.ta6.value = 'Answer Soon'", 4000)
setInterval("document.f3.ta6.value = ''", 4300)
</script>
<div class="spec">
<form name="z">
<input name="textdisplay" type="text" size=50>
<input name="do_it" type="button" value="run banner" onClick = "doIt()">
</form>
</div>
<script language= "javascript">
var sent = "This is a demonstration of a banner moving from the left to right.
It makes use of the substring property of Javascript to make an interesting display."
var slen = sent.length
var siz = 100
var a = -3, b = 0
var subsent = "x"
function makeSub(a,b) {
subsent = sent.substring(a,b) ;
return subsent;
}
function newMake() {
a = a + 3;
b = a + siz
makeSub(a,b);
return subsent
}
function doIt() {
for (var i = 1; i <= slen ; i++) {
setTimeout("document.z.textdisplay.value = newMake()", i*300);
setTimeout("window.status = newMake()", i*300);
}
}
</script>