JSFiddle - React, Tailwind, and code Playground

by ergec

HTML

<form action="/signup/signup_success.html" id="regform" class="form-horizontal" novalidate="novalidate" autocomplete="off">
    <fieldset>
        <div class="checkbox">
            <label for="agb" id="checkbox_validate" class="hide success">Please accept Terms of Use</label>
            <label>
                <input type="checkbox" name="agbcheckbox" id="agbcheckbox">Yes <a target="_blank" href="http://example.de">Datenschutzbestimmungen</a>.</label>
        </div>
        <div class="buttonWrapper">
            <button type="submit" class="try-button">Register</button>
        </div>
    </fieldset>
</form>

JavaScript

//check if checkbox for terms of use is checked or not
 $("#regform").submit(function (event) {
     if ($('#agbcheckbox').prop('checked')) {
         $('#checkbox_validate').removeClass('show').addClass('hide');
         //checkbox for terms of use is checked
     } else {
         //checkbox for terms of use is NOT checked
         $('#checkbox_validate').removeClass('hide').addClass('show');
         alert("Accept terms");
         event.preventDefault();
     }
 });