JSFiddle - React, Tailwind, and code Playground

by liyuankui

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<form class="form" action="console.log('*')">
<fieldset>

<!-- Form Name -->
<legend>@Support</legend>

<!-- Text input-->
<div class="form-group col-md-12">
  
  <div class="col-md-8">
    <div class=" must-column"><label class="control-label" for="email">Email Address</label></div>
    <input id="email" name="email" type="text" placeholder="[email protected]" class="col-md-4 form-control input-md" required="true" data-container="body"  data-toggle="popover" data-placement="right" data-trigger="click"  data-content="Please input your email address so that we can contact you.">
  </div>
</div>

<!-- Select Basic -->
<div class="form-group col-md-12">

  <div class="col-md-8">
    <div class=" must-column"><label class="control-label" for="region">Region</label></div>
    <select id="region" name="region" class="form-control col-md-4" data-container="body"  data-toggle="popover" data-placement="right" data-trigger="click"  data-content="Please select where your base locates.">
      <option value="1">Tokyo</option>
      <option value="2">Osaka</option>
      <option value="3">Kyoto</option>
        </select>
  </div>
</div>

<!-- Text input-->
<div class="form-group col-md-12">
  
  <div class="col-md-8">
      <div class=" must-column"><label class="control-label" for="telephone">Telphone</label>  </div>
  <input id="telephone" name="telephone" type="text" placeholder="(020)2233-2123" class="col-md-4 form-control input-md" required="" data-container="body"  data-toggle="popover" data-placement="right" data-trigger="click"  data-content="Please input your telephone number so that we can contact you.">
  </div>
</div>

<!-- Textarea -->
<div class="form-group col-md-12">
  
  <div class="col-md-8">                     
      <div class=" must-column"><label...

CSS

.must-column:after {
color: #bf1e56;
content: "*";
position: absolute;
margin-top: 0px;
margin-left: 5px;
font-size: 32px;
line-height: 32px;
}

JavaScript

window.isAfter=false;
$('.form-control').popover({
    html: 'true',
    placement: 'right'
});

$('body').on('click', '.form-group.has-error .form-control', function(){
    if(isAfter) {
        $('.form-control').popover('hide');
        (function($t){
            setTimeout(function(){
                $t.popover('show');
            },200)
        })($(this))
    }
});

$('#email').blur(function(){
    if(!validateEmail($(this).val())){
        setPopover($(this), '<p>Please input your email address so that we can contact you.</p><p style="color:red">`'+$(this).val()+'` is not a valid email.</p>');
        $(this).parents('.form-group').addClass('has-error');
        $(this).popover('show');
    }else{
        $(this).parents('.form-group').removeClass('has-error');
        $(this).attr('data-content', 'Please input your email address so that we can contact you.');
    }
});

$('#submitx').click(function(e){
    e.preventDefault();
    var $tel = $('#telephone');
    $('#email').parents('.form-group').addClass('has-error');
    $('#region').parents('.form-group').addClass('has-warning');
    $tel.parents('.form-group').addClass('has-error');
    $('#problem').parents('.form-group').addClass('has-success');
    setPopover($tel, '<p>Please input your telephone number so that we can contact you.</p><span style="color:red">Your telephone `'+$tel.val()+'` is not from Tokyo, but from Kyoto.</span><p/><button class="btn btn-xs btn-primary" id="fix">Change</button><span class="text-primary link"> Region</span> to Kyoto');
    $tel.popover('show');
    setPopover($('#email'), '<p>Please input your email address so that we can contact you.</p><span style="color:red">Your email `'+$('#email').val()+'` is not registered in our system, we can\'t help you now.</span><p/><button class="btn btn-xs link" id="register">Register</button>');
    $('#email').popover('show');
    isAfter=true;
    
});
$('body').on('click', '#fix', function(){
    $('#region').val(3);
   ...