JSFiddle - React, Tailwind, and code Playground

by olzpa

HTML

<style>
img,legend{border:0}a:hover,mark{color:#000}.CheckOutNav li.active,.CheckOutNav li.done a,.CheckOutNav li.done a:hover{text-decoration:none;font-weight:400;font-style:normal}.CheckOutNav,.CheckoutSelect,.simple-list{list-style-type:none}.Basket,table{border-collapse:collapse}.ContentArea button.AddToBasketButton{font-weight:400!important}/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}.ep-locationItem,.select-option-headline{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html...

CSS

div#BasketAddressFormContainer p.hidden, form#registrationForm p.hidden {
    display: none;
}
div#BasketAddressFormContainer p.puhelin-huomio, form#registrationForm p.puhelin-huomio {
    color: red;
}

JavaScript

// UNCOMMENT THIS AT SHOP
//require(['jquery', '$ready!'], function ($) {


// Puhelinnumeron validointi
if($('div#BasketAddressFormContainer, form#registrationForm').length){
    $('<p class="puhelin-huomio hidden">Tarkista puhelinnumerosi muoto!</p>').insertAfter('input[name=Phone]');
    
    var $regexname=/^(\+358|0)[\d| ]{0,10}$/;
    $('input[name=Phone]').on('keypress keydown keyup',function(){
             if (!$(this).val().match($regexname)) {
              // there is a mismatch, hence show the error message
                 $('.puhelin-huomio').removeClass('hidden');
             }
           else{
                // else, do not display message
                $('.puhelin-huomio').addClass('hidden');
               }
         });
 }

// UNCOMMENT THIS AT SHOP
//});