<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="col-lg-4"> <input type="text" name="signup" id="signuptop" class="form-control cst-ctrl" placeholder="Enter your email Address"> <input type="submit" class="btn btn-info cst-btn" name="submit-btn" value="Subscribe" id="sub1" onclick="checkmail();"> <div class="clearfix"></div> <span class="cst-error"></span> </div> </div> <?php query_posts(array('post_type' => 'ram_jane', 'showposts' =>-1 , 'order' => 'DESC', 'meta_key'=> 'yes', 'meta_value' => true )); ?>

.cst-error.cst-danger { color: brown; font-size:26px; } .cst-error.cst-success { color: blue; font-size:26px; }

function checkmail() { var email = document.getElementById('signuptop'); if(email.value=='') { $('.cst-error').text('enter email').show().addClass('cst-danger').removeClass('cst-success'); return false; } var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; if (!filter.test(email.value)) { $('.cst-error').text('invalid email').show().addClass('cst-danger').removeClass('cst-success'); email.focus; return false; } else{ $('.cst-error').text('succes').show().addClass('cst-success').removeClass('cst-danger'); } }