<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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="form_box hidden-sm hidden-xs" > <form onclick="return validate()"> <div class="form_head text-center"> <h4>Get In Touch</h4> </div> <div class="form_content"> <div class="form-group"> <label>Name</label> <input type="text" class="form-control form_in" id="name" autocomplete="off"> <span id="errname"></span> </div> <div class="form-group"> <label>Email-id</label> <input type="text" class="form-control form_in" id="email" autocomplete="off"> <span id="erremail"></span> </div> <div class="form-group"> <label for="sel1">Location</label> <select class="form-control form_in" id="city"> <option class="ch" value="mu">Select Your Location</option> <option class="ch" value="mu">Mumbai</option> <option class="ch" value="mu">3</option> <option class="ch" value="mu">4</option> </select> <span id="errcity"></span> </div> <div class="input-group"> <input type="text" class="form-control form_in" maxlength="10" placeholder="Mobile" id="mobile" name="search"> <div class="input-group-btn" data-toggle="modal" data-target="#verify"> <input type="button" class="btn btn-default btn-verify" id="digits" onclick="generateOTP()" value="Verify"> </div> </div> <span id="errmob"></span> <div class="f_btn text-center"> <input type="submit" class="form_btn" value="submit"> </div> </div> </form> </div>

.form_box { position: absolute; top: 100px; color: #000; padding: 20px; right:500px; width: 320px; height: 400px; background: rgb(255, 255, 255); z-index: 999; border:1px solid gray; margin-bottom:50px; } .form_head h4 { font-size: 21px; color: #189ad7; font-weight: bold; } .form_in { border-radius: 0; border-top: 0; border-left: 0; border-right: 0; color: #000; border-bottom: 1px solid deeppink; background: transparent; font-weight: bold; box-shadow: none; } .form_btn { height: 35px; width: 150px; border: 1px solid #fff; background: deeppink; color: #fff; margin-top: 15px; font-weight: bold; transition: all 0.3s; } .form_btn:hover { letter-spacing: 2px; } .btn-verify { background: #138ebc; color: #fff; font-weight: bold; } span{ color:red; } }

function validate(){ var name=document.getElementById('name').value; var email=document.getElementById('email').value; var city=document.getElementById('city').value; var mobile=document.getElementById('mobile').value; if(name==""){ document.getElementById('errname').innerHTML="**Name Should Not Be Empty"; return false; }else{ document.getElementById('errname').innerHTML=""; } if(email==""){ document.getElementById('erremail').innerHTML="**Email Not Be Empty"; return false; }else{ document.getElementById('erremail').innerHTML=""; } if(city=="mu"){ document.getElementById('city').style.background="deeppink"; document.getElementById('city').style.color="#fff"; return false; }else{ document.getElementById('errcity').innerHTML=""; } if(mobile==""){ document.getElementById('errmob').innerHTML="**mobile should not be empty"; document.getElementById('ver').disabled=true; return false; }else{ document.getElementById('errmob').innerHTML=""; document.getElementById('ver').disabled=false; } if((mobile.length>10) || (mobile.length<10)){ document.getElementById('errmob').innerHTML="**mobile should 10digits"; document.getElementById('ver').disabled=true; return false; }else{ document.getElementById('errmob').innerHTML=""; document.getElementById('ver').disabled=false; } }