Skip to content

Instantly share code, notes, and snippets.

@marktyers

marktyers/gist:615074ff49d31ca3dcce

Created December 11, 2014 16:59
Show Gist options
  • Save marktyers/615074ff49d31ca3dcce to your computer and use it in GitHub Desktop.
Save marktyers/615074ff49d31ca3dcce to your computer and use it in GitHub Desktop.
Download ZIP
Form validation with array
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<title>Simple Form Validation</title>
<script>
window.onload = function() {
console.log('onLoad');
var people = [];
var form = document.forms.register;
document.getElementById('average').onclick = function() {
console.log('average click');
var total = 0;
people.forEach(function(item) {
console.log(item);
console.log(item.phone);
total = total + parseInt(item.phone);
});
console.log(total);
var average = total/people.length
console.log(average);
document.getElementById('personAv').innerHTML = average;
}
form.onsubmit = function() {
console.log('onSubmit');
var person = {}
person.name = form.name.value;
person.phone = form.phone.value;
people.push(person);
console.log(people)
console.log(form.name.value);
if (form.name.value.length == 0) {
console.log('empty field');
document.getElementById('nameError').innerHTML = 'Name field empty'
return false;
} else {
document.getElementById('nameError').innerHTML = ''
} // if
return false;
} // onSubmit
form.name.onblur = function() {
console.log('onBlur');
if (form.name.value.length == 0) {
console.log('empty field');
document.getElementById('nameError').innerHTML = 'Name field empty';
return false;
} else {
document.getElementById('nameError').innerHTML = '';
} // if
} // onBlur
form.phone.onkeyup = function() {
console.log('onKeyUp');
form.phone.value = form.phone.value.replace(' ', '');
if (form.phone.value.length == 0 || isNaN(form.phone.value)) {
console.log('failed validation');
document.getElementById('phoneError').innerHTML = 'Invalid phone number';
} else {
document.getElementById('phoneError').innerHTML = '';
}
} // onKeyUp
} // onLoad
</script>
</head>
<body style="margin:5em">
<form name="register" method="post" action="http://www.google.com/">
<p>Name:</br><input type="text" name="name"/><span id="nameError"></span></p>
<p>Phone:</br><input type="text" name="phone"/><span id="phoneError"></span></p>
<p><input type="submit"/></p>
</form>
<button id="average">Average</button>
<p id="personAv"></p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment