Skip to content

Instantly share code, notes, and snippets.

@tatat
Last active May 19, 2017 05:42
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save tatat/dbd1db2c046aadfc912f7c1c4b06bc11 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.errors {
color: red;
}
</style>
<script>
!function() {
function toArray(el) {
return Array.prototype.slice.call(el)
}
function h(text) {
var encoder = document.createElement('div')
encoder.appendChild(document.createTextNode(text))
return encoder.innerHTML
}
function validate(form) {
var errors = {}
errors['#checkbox-group-1'] = []
var checkboxItems1 = toArray(form.querySelectorAll('#checkbox-group-1 [type="checkbox"]'))
if (checkboxItems1.filter(function(el) { return el.checked }).length === 0)
errors['#checkbox-group-1'].push('not checked')
errors['#checkbox-group-2'] = []
var checkboxItems2 = toArray(form.querySelectorAll('#checkbox-group-2 [type="checkbox"]'))
if (checkboxItems2.filter(function(el) { return el.checked }).length === 0)
errors['#checkbox-group-2'].push('not checked')
errors['#radio-group-1'] = []
var radioItems1 = toArray(form.querySelectorAll('#radio-group-1 [type="radio"]'))
if (radioItems1.filter(function(el) { return el.checked }).length === 0)
errors['#radio-group-1'].push('not selected')
return errors
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#form-id').addEventListener('submit', function(e) {
var errors = validate(this)
var hasError = false
Object.keys(errors).forEach(function(selector) {
var errorContainer = document.querySelector(selector).querySelector('.errors')
var currentErrors = errors[selector]
errorContainer.innerHTML = ''
if (currentErrors.length > 0) {
hasError = true
currentErrors.forEach(function(error) {
errorContainer.innerHTML += '<div class="error">' + h(error) + '</div>'
})
}
})
if (hasError)
e.preventDefault()
})
})
}()
</script>
</head>
<body>
<form id="form-id" action="">
<div id="checkbox-group-1">
<label for="checkbox-id-1-1">checkbox-1-1</label>
<input id="checkbox-id-1-1" name="checkbox-name-1-1" type="checkbox">
<label for="checkbox-id-1-2">checkbox-1-2</label>
<input id="checkbox-id-1-2" name="checkbox-name-1-2" type="checkbox">
<label for="checkbox-id-1-3">checkbox-1-3</label>
<input id="checkbox-id-1-3" name="checkbox-name-1-3" type="checkbox">
<div class="errors"></div>
</div>
<div id="checkbox-group-2">
<label for="checkbox-id-2-1">checkbox-2-1</label>
<input id="checkbox-id-2-1" name="checkbox-name-2-1" type="checkbox">
<label for="checkbox-id-2-2">checkbox-2-2</label>
<input id="checkbox-id-2-2" name="checkbox-name-2-2" type="checkbox">
<label for="checkbox-id-2-3">checkbox-3-3</label>
<input id="checkbox-id-2-3" name="checkbox-name-2-3" type="checkbox">
<div class="errors"></div>
</div>
<div id="radio-group-1">
<label for="radio-id-1">radio-1</label>
<input id="radio-id-1" type="radio" name="radio-name-1">
<label for="radio-id-2">radio-2</label>
<input id="radio-id-2" type="radio" name="radio-name-1">
<label for="radio-id-3">radio-3</label>
<input id="radio-id-3" type="radio" name="radio-name-1">
<div class="errors"></div>
</div>
<div>
<input type="submit">
</div>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment