How to add a 'required' checkbox to a form

Discussion in 'HTML & Website Design' started by chrisj, May 28, 2014.

  1. #1
    I have this on a contact form that (I believe) makes the email field mandatory, correct?

    <td class="required_field">*</td>
    <td>Email Address</td>
    <td><input type="text" name="email" maxlength="40" style="width:400px; border: 1px solid #696969;" /><br /><br /></td>
    </tr>
    Can you please tell me how to make a checkbox required to be checked on the form?
     
    chrisj, May 28, 2014 IP
  2. Wisnu Adi Nurcahyo

    Wisnu Adi Nurcahyo Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #2
    Why you not use radio button?
     
    Wisnu Adi Nurcahyo, May 28, 2014 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    28,813
    Likes Received:
    4,535
    Best Answers:
    123
    Trophy Points:
    665
    #3
    There are loads of validation libraries - pick one and it will have an example.

    Basically you want the script to run when the form is submitted and return false if the checkbox isn't checked.
     
    sarahk, May 28, 2014 IP
  4. Wisnu Adi Nurcahyo

    Wisnu Adi Nurcahyo Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #4
    After use that check box validation, you must validate it with PHP or other server side scripting...
    Because if browser not support javascript that validate will not effect
     
    Wisnu Adi Nurcahyo, May 28, 2014 IP
  5. mxscripts

    mxscripts Well-Known Member

    Messages:
    33
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    115
    Digital Goods:
    1
    #5
    Can you please tell me how to make a checkbox required to be checked on the form?

    You can disable Submit button if checkbox is not checked.

    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script> 
        $(function() {
        $('input.required').click(function() {
            var unchecked = $('input.required:not(:checked)').length;
            if (unchecked == 0) {
                $('#submitBtn').removeAttr('disabled');
            }
            else {
                $('#submitBtn').attr('disabled', 'disabled');
            }
            });
        });
    </script>
    
    <form method="post" action="submit.php">
    <input type="checkbox" class="required" /> Click to check
    <br />
    <input disabled="disabled" type='submit' id="submitBtn" value="Submit">
    </form>
    
    Code (markup):
    And don't forget to make a PHP test in submit.php, for users who disabled JavaScript.

    Demo: http://www.mxscripts.com/test/checkbox_required.php
     
    mxscripts, May 28, 2014 IP
  6. chrisj

    chrisj Well-Known Member

    Messages:
    606
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #6
    Thanks for that "disable Submit button if checkbox is not checked". That's great.
    Can you provide some info on how to "make a PHP test in submit.php, for users who disabled JavaScript", please?
     
    chrisj, May 29, 2014 IP
  7. sarahk

    sarahk iTamer Staff

    Messages:
    28,813
    Likes Received:
    4,535
    Best Answers:
    123
    Trophy Points:
    665
    #7
    If they haven't checked it and the form is still submitted your php/asp/servlet script can still reject the form and send it back to the user.

    Don't get too caught up on users without javascript - they are a tiny, tiny minority.
     
    sarahk, May 29, 2014 IP
  8. BenBlurr

    BenBlurr Greenhorn

    Messages:
    37
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #8
    If I were you, I would search for tutorials and build it from scratch. That way you learn JS/PHP yourselve which improves your skills
     
    BenBlurr, Jun 3, 2014 IP