javascript/html:make input fields required on checkbox check

Question

So like I want to make an input field required when a checkbox is checked an 'not required' when it is unchecked...I've tried the following code but it was not working ...please help...

<form action="#">
    <input id='req'><input type="submit"></form><input type="checkbox" onclick="req()" id="check">
    <script>

    function req(){
        var req = document.getElementById("req");
        var checkBox = document.getElementById("check");
        if (checkBox.checked == true){
            alert("checked")
            req.required==true

        } else {
          alert("uncheck")
          req.required==false
        }

    }



    </script>

Possible duplicate of If checkbox selected make input required — Nergal
– Nergal, Commented Jul 18, 2018 at 19:27
It's not quite a duplicate but it's close. More importantly though, this makes no sense. If the checkbox is checked, than it's value is being submitted, so marking it required is redundant. If it is unchecked, it's value is empty, so marking it as not required is again redundant. I think you should just make the checkbox optional and move on. — Peter M. Elias
– Peter M. Elias, Commented Jul 18, 2018 at 19:44
no...the input field type="text" will be required not the checkbox itself — Prime Jay
– Prime Jay, Commented Jul 18, 2018 at 20:41

Ilan P · Accepted Answer · 2018-07-18 19:39:15Z

1

Give this a try:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
    <title>Ilan's Test</title>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div id="results">
                    <form name="test" id="test" action="#" method="GET">
                        <div class="input-group">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="cbox">
                                <label class="form-check-label" for="cbox">Make field required</label>
                            </div>
                        </div><br>

                        <div class="input-group">
                            <input type="text" id="tbox" class="form-control">
                        </div><br>
                        <button type="submit" id="sub" class="btn btn-primary">Submit</button><br>
                        <small><span class="status"></span></small>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            // On click of checkbox
            $('#cbox').click(function() {
                // Check if it's checked
                if ($(this).prop('checked')) {
                    // Add the required attribute to the text input
                    $('#tbox').attr('required', '');
                    // log our results and display a small indicator span status
                    console.log('input is now required');
                    $('.status').text('input is now required');
                } else {
                    // If it isn't checked, remove the required attribute
                    $('#tbox').removeAttr('required');
                    // log our results and display a small indicator span status
                    console.log('input is no longer required');
                    $('.status').text('input is no longer required');
                }
            });
        });
    </script>
</body>

</html>

answered Jul 18, 2018 at 19:39

Ilan P

1,7921 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Prime Jay Over a year ago

but why is it so long

Prime Jay Over a year ago

I would have upvoted ur answer but I have less than 15 reputtion

Ilan P Over a year ago

Happy to help; my examples long because I included comments/arbitrary code to show how it works :)

Collectives™ on Stack Overflow

javascript/html:make input fields required on checkbox check

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related