JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.js"></script>
<div class="container">
  <div id='basic-modal'> <a href='#' class='basic'>Demo</a>
</div>
  <div id='container'>
    <div id="basic-modal-content">
        <div class="col-md-2">
            <div class="logo"></div>
        </div>
        <form id="phone">
            <div class="col-md-10">
                <div class="modal-header" style="text-align: center;">
                     <h5>Get a link to Reuters TV on your phone</h5> 
                    <div class="input-group">
                        <div class="input-group-btn">
                            <button id="label" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span id="areaCode">+1</span><span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#" id="1">US: +1</a>
                                </li>
                                <li><a href="#" id="44">UK: +44</a>
                                </li>
                            </ul>
                        </div>
                        <input class="form-control phone" name="phone" aria-label="..." placeholder="Your phone number" type="text"> <span class="input-group-btn">
                  <input class="btn btn-default" type="submit" value="SUBMIT" />
                  </span>

                    </div>
                        <label class="error"></label>
                </div>
            </div>
        </form>
    </div>
</div>
</div>

JavaScript

// Load dialog on page load
    //$('#basic-modal-content').modal();

    // Load dialog on click
    $('#basic-modal .basic').click(function (e) {
        $('#basic-modal-content').modal();
        return false;
    });
    
    
    $("#1, #44").click(function (e) {
        $("#label").html("+" + $(this).attr("id") + " <span class='caret'></span>");
        if ($(this).attr("id") == '1') {
            $('input[name="phone"]').rules('remove', 'phoneUK');
            $('input[name="phone"]').rules('add', {
                phoneUS: true
            });
        } else {
            $('input[name="phone"]').rules('remove', 'phoneUS');
            $('input[name="phone"]').rules('add', {
                phoneUK: true
            });
        }
    });

    $('.phone').on('input', function (event) {
        this.value = this.value.replace(/[^0-9]/g, '');
    });

    $("#phone").validate({
        errorPlacement: function(error, element) {
            error.insertAfter($(element).parent('div'));
        },
        rules: {
            phone: {
                required: true,
                phoneUS: true // starts with this
            }
        },
        submitHandler: function (form) {
            var phone = $(this).find('.phone').val();
            $.ajax({
                url: '/textMessage/' + $('input[name="phone"]').val(),
                method: "GET",
                success: function () {
                    console.log(form);
                }
            });
            return false;
        }
    });