JSFiddle - React, Tailwind, and code Playground

by Kartikeya Khosla

HTML

<form id="newPlayer" action="www.google.com">
  <h3>Username:</h3>
  <input type="text" name="user" />
  <br>
  <h3>Please Choose a Class:</h3>
  <input type="radio" name="class" value="archer" />Archer
  <input type="radio" name="class" value="mage" />Mage
  <input type="radio" name="class" value="warrior" />Warrior
  <br>
  <h3>Please Choose a Race:</h3>
  <input type="radio" name="race" value="Orc" />Orc
  <input type="radio" name="race" value="Elf" />Elf
  <input type="radio" name="race" value="Human" />Human
  <input type="radio" name="race" value="Worg" />Worg
  <br>
  <input type="submit" value="Submit" />
  <p id="descript"></p>
</form>

CSS

#newPlayer {
  position: relative;
  top: 20px;
  color: #8b0909;
  background-color: rgba(0, 0, 0, .3);
  width: 350px;
  margin: auto;
  height: 275px;
  border-radius: 5px;
  text-shadow: 1px 1px 1px black;
}

#newPlayer h3 {
  font-size: 20px;
  font-family: 'Droid Sans', sans-serif;
  font-weight: 700;
  padding-bottom: 5px;
}

#newPlayer p {
  max-width: 275px;
  margin: auto;
  margin-top: 5px;
  color: #c10606;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

#newPlayer input[type=submit] {
  color: black;
  border-radius: 5px;
  font-family: 'Droid Sans', sans-serif;
}

JavaScript

$('form').submit(function(){
	if($('input:text').val() == "" || !$('input[name="class"]:checked').length || !$('input[name="race"]:checked').length)
  {
    alert("all fields required");
  	return false;
  }
});