Importants Assests

Bootstrap

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row">  
<div class="col col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">  
</div> 
</div>

Validation

<script>
    function onvalidate(){
    	var fname = document.getElementById('fullname').value;
    	var emailid = document.getElementById('email').value;
    	var password = document.getElementById('pass').value;
    	var num = document.getElementById('credit').value;
    	var cityy = document.getElementById('city').value;
    	var date = document.getElementById('date').value;
    	
    	
        var letters=/^[A-Za-z]+$/;
        var mailformat =/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        var paswd=  /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{7,15}$/;
        var cardno = /^(?:3(?:0[0-5]|[68][0-9])[0-9]{11})$/;
        var dateformat = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
        
        if(fname==""||fname==null){
        	document.getElementById('chkfullname').innerHTML='*full name field is required';
        	document.getElementById('fullname').focus();
        	return false;
        }
       /*  else if(!fname.match(letters)){
        	document.getElementById('chkfullname').innerHTML='*please enter only alphanumeric value';
        	document.getElementById('fullname').focus();
        	return false; 
        }*/else if(!emailid.match(mailformat)){
        	document.getElementById('chkemail').innerHTML='*please enter valid email';
        	document.getElementById('email').focus();
        	return false;
        }else if(!password.match(paswd)){
        	document.getElementById('chkpass').innerHTML='*please enter valid password';
        	document.getElementById('pass').focus();
        	return false;
        }else if(num.match(cardno)){
        	document.getElementById('chkcredit').innerHTML='*please enter valid card no.';
        	document.getElementById('credit').focus();
        	return false;
        }else if(cityy=="Select city"||cityy==""){
        	document.getElementById('chkcity').innerHTML='*please select city';
        	document.getElementById('city').focus();
        	return false;
        	
        }else if(document.getElementById('male').checked==false && document.getElementById('female').checked==false){
        	document.getElementById('chkgender').innerHTML='*please select gender';
        	document.getElementById('male').focus();
        	document.getElementById('female').focus();
        	return false;
        	
        }else if(document.getElementById('cricket').checked==false && document.getElementById('book').checked==false && document.getElementById('sketch').checked==false && document.getElementById('drawing').checked==false){
        	document.getElementById('chkhobbie').innerHTML='*please select hobboies';
        	document.getElementById('cricket').focus();
        	
        	return false;
        	
        }else if(!date.match(dateformat)){
        	document.getElementById('chkdate').innerHTML='*please enter valid password';
        	document.getElementById('date').focus();
        	return false;
        }else
        	return true;
        	
        		
        	
        	
       
        
    }
    
    </script>