JSFiddle - React, Tailwind, and code Playground

by jame1

HTML

<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webshim/1.16.0/dev/polyfiller.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<form action="javascript:void(0)" method="post" id="customForm1">

    <div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne"
                       aria-expanded="true" aria-controls="collapseOne">
                        Collapsible Group Item #1
                    </a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">

                    <div class="form-group">

                        <p>Field 1: <input type="text" class="form-control" name="text1" required="required"/></p>
                        <p>Field 2: <input type="email" class="form-control" name="text2" required="required"/></p>
                        <p>Field 3: <input type="text" class="form-control" name="text3" required="required"/></p>
                        <p>Field 4: <input type="text" class="form-control" name="text4" required="required"/></p>

                        <div class="col-lg-12 text-center">
                            <a href="#collapseTwo" data-toggle="collapse" type="button" class="btn btn-default">Default</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
        <div class="panel...

JavaScript

webshim.setOptions('forms', {
        replaceValidationUI: true
    });

    webshim.polyfill('forms');
    
    $("#customForm1 a[type=button]").on("click", function (e) {
        $(this).closest('.panel-body').find('input:invalid').each(function (index, node) {
            e.stopPropagation();

            if (!($(this).callProp('checkValidity'))) {
                return;
            }
        });
    });