<FORM ACTION="javascript-form-validation.htm" id="testform" NAME="testform" onSubmit="return myonsubmit()">
Email Address: <input id="email" maxlength="80" name="email" size="20" type="text" />
<input id="modify" type="submit" />
</form>
<div id="loading" class="progress-indicator hidden">
<span class="progress-indicator-value"></span>
</div>
<script type="text/javascript">
// jquery based references, could also use getElementById
var hidebutton= function() {
$('#loading').show();
$('#modify').hide();
}
function myonsubmit() {
// multiple functions all evaluated by onSubmit
result = confirm("Are you sure you want to continue?");
// alert(result); // debugging
if (result) {
hidebutton();
return true;
} else {
return false;
}
}
</script>
- - - - - - - - - - - - - - - - - - - - - - - - - - -
<html><head><title>javascript form validation</title></head>
<body>
<!-- onSubmit tells the browser that there is a javascript function to run when the user hits the submit button -->
<FORM ACTION="javascript-form-validation.htm" NAME="testform" onSubmit="return validateMyForm()">
Starting X Point: <input name="startx" type="text"><br />
Starting Y Point: <input name="starty" type="text"><br />
Email Address: <input id="email" maxlength="80" name="email" size="20" type="text" />
<br /> <br />
<input type="submit" />
</form>
<script type="text/javascript" language="javascript">
function validateMyForm()
{
if (document.getElementById('startx').value == '')
{
alert('Please enter a Starting X value (integer)');
document.getElementById('startx').focus();
return false;
}
if (document.getElementById('starty').value == '')
{
alert('Please enter a Starting Y value (integer)');
document.getElementById('starty').focus();
return false;
}
if (document.testform.email.value == '') {
alert('Please enter your email');
document.myForm.email.focus();
return false;
}
//if we've passed all of the above checks
return true;
}
</script>
</body>
</html>