JSFiddle - React, Tailwind, and code Playground

by dhirenpateldev

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<body>
<div class="mail">
<h2>First Name</h2>
<form name="form1"  method="post">
<ul>
<li><input type='text' name='text1'/></li>
<li class="rq">*Enter letters and space only.</li>
<li>&nbsp;</li>
<li><input type="submit" name="submit" value="Submit" onclick="alphanumeric(text1)" /></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script>
function alphanumeric(inputtxt)
{ 
var letters = /^[a-zA-Z-,]+(\s{0,1}[a-zA-Z-, ])*$/;
if(inputtxt.value.match(letters))
{
alert('Your registration number have accepted : you can try another');

return true;
}
else
{
alert('Please input alphanumeric characters only');
return false;
}
}
</script>
</body>

CSS

li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}