Put it inside <script>
tags before the closing </body>
tag.
Then check the console while testing to see if it is working as you expect it to.
Put it inside <script>
tags before the closing </body>
tag.
Then check the console while testing to see if it is working as you expect it to.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Checkbox validation</title>
<style>
body {
font: 100%/1.4 sans-serif;
}
</style>
</head>
<body>
<form action="" method="post">
<div id="baskets">
<div class="radio radio1">
<label>
<input type="radio" name="showform" id="optionradios" value="micro" data-min="2" data-max="4" checked>
<h3 class="h3one"><span id="mystyle4">Fruit</span> <span id="mystyle3">Basket</span> Micro:₦2,000</h3></div>
<div class="radio radio1">
<label>
<input type="radio" name="showform" id="optionradios" value="mini" data-min="5" data-max="6" >
<h3 class="h3one"><span id="mystyle4">Fruit</span> <span id="mystyle3">Basket</span> Mini:₦3,000</h3></div>
<div class="radio radio1">
<label>
<input type="radio" name="showform" id="optionradios" value="midi" data-min="7" data-max="8" >
<h3 class="h3one"><span id="mystyle4">Fruit</span> <span id="mystyle3">Basket</span> Midi:₦4,500</h3></div>
<div class="radio radio1">
<label>
<input type="radio" name="showform" id="optionradios" value="maxi" data-min="10" data-max="12">
<h3 class="h3one"><span id="mystyle4">Fruit</span> <span id="mystyle3">Basket</span> Maxi:₦5,000</h3></div>
</div>
<div id="fruits">
<label class="checkbox">
<input type="checkbox" value="Avocado" name="chk[]"> Avocado
</label>
<label class="checkbox">
<input type="checkbox" value="Banana" name="chk[]"> Banana
</label>
<label class="checkbox">
<input type="checkbox" value="Cabbage" name="chk[]"> Cabbage
</label>
<label class="checkbox">
<input type="checkbox" value="Carrot" name="chk[]"> Carrot
</label>
<label class="checkbox">
<input type="checkbox" value="Cucumber" name="chk[]"> Cucumber
</label>
<label class="checkbox">
<input type="checkbox" value="Garden Eggs" name="chk[]"> Garden Eggs
</label>
<label class="checkbox">
<input type="checkbox" value="Green Apple" name="chk[]"> Green Apple
</label>
<label class="checkbox">
<input type="checkbox" value="Green Grape" name="chk[]"> Green Grape
</label>
<label class="checkbox">
<input type="checkbox" value="Orange" name="chk[]"> Orange
</label>
<label class="checkbox">
<input type="checkbox" value="Paw Paw" name="chk[]"> Paw Paw
</label>
<label class="checkbox">
<input type="checkbox" value="Pear" name="chk[]"> Pear
</label>
<label class="checkbox">
<input type="checkbox" value="Pineapple " name="chk[]"> Pineapple
</label>
<label class="checkbox">
<input type="checkbox" value="Red Apple" name="chk[]"> Red Apple
</label>
<label class="checkbox">
<input type="checkbox" value="Red Grape" name="chk[]"> Red Grape
</label>
<label class="checkbox">
<input type="checkbox" value="Watermelon" name="chk[]"> Watermelon
</label>
</div>
<p><button type="submit">Submit</button></p>
</form>
<script>
function showValidationError(text) {
alert(text);
}
function countSelectedFruits() {
return document.querySelectorAll('#fruits input[type="checkbox"]:checked').length;
}
function getAllowedRange() {
var range = { min: 0, max: 0 };
var checkedRadio = document.querySelector('#baskets input[type="radio"]:checked')
if (checkedRadio) {
range.min = Number(checkedRadio.getAttribute("data-min"));
range.max = Number(checkedRadio.getAttribute("data-max"));
}
return range;
}
function validate(e) {
var range = getAllowedRange();
var nChecked = countSelectedFruits();
var tooFewChecked = (range.min > 0 && nChecked < range.min);
var tooManyChecked = (range.max > 0 && nChecked > range.max);
var isValid = !(tooFewChecked || tooManyChecked);
if (tooFewChecked) {
showValidationError("Not enough fruits selected");
} else if (tooManyChecked) {
showValidationError("Too many fruits selected");
}
if (!isValid) {
e.preventDefault();
}
return isValid;
}
document.forms[0].addEventListener("submit", validate);
</script>
</body>
</html>
This is all I have time for right now, but itās a start at least. There are some errors in the HTML though, like SamA74 already pointed out. I havenāt fixed that here.
Whatās left to do is to fix so that showValidationError()
shows an error message in a better way. That is, show the error message somewhere on the page instead of using alert
. And the error messages themselves should probably be updated to say something less crappy.
As you already know, those validations can easily be done by the Javascript but Iām really curious on User Experience to know those validation.
It worked! I Donāt know how to thank you guys all of you I am eternally grateful.
Hey everyone, most especially Cletus how u all doing
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.