How to use JavaScript for my complex validation requirements?

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:&#8358;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:&#8358;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:&#8358;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:&#8358;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. :slight_smile:

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. :smiley:

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.