JSFiddle - React, Tailwind, and code Playground

by omikey

HTML

<div class="container">
 <div id="labels">
        <h3>Username </h3>
        <h3>Password</h3>
        <h3>Age</h3>
        <h3>Email</h3>
        <h3>Existing customer?</h3>
        <h3>Select your preferences</h3>
        <h3>Newsletter Preferences</h3>
        <h3 class="heading">Menu Options</h3>
        <h3 class="feedback">Send us your feedback !</h3>
     </div>

    <div id="fields">
      <form action="#" method="get" name="referenceToForm">
        <div>
          <input type="text" name="Username" id="Username" class="element" required/>
        </div>
        <div>
          <input type="password" name="Password" class="element" required/>
        </div>
        <div>
          <input type="number" name="Age" class="element" required/>
        </div>
        <div>
          <input type="email" name="Email" class="element" required/>
        </div>
        <div class="different">
          <input type="radio" name="customer" id="one" checked="checked" />
          <label for="one">Yes</label>
          <input type="radio" name="customer" id="two" />
          <label for="two">No</label>
        </div>

        <div class="value">
          <input type="checkbox" name="interest" id="three" />
          <label for="three">Dog</label>
          <input type="checkbox" name="interest" id="four" />
          <label for="four">Cat</label>
          <input type="checkbox" name="interest" id="five" />
          <label for="five">Parrot</label>
          <input type="checkbox" name="interest" id="six" />
          <label for="six">Possum</label>
          <span id="spanning"> </span>
        </div>

        <div>
          <select class="preference" id="preference" value="-1">
            <option value="Entertainment">Entertainment</option>
            <option value="Technology">Technology</option>
            <option value="TV">TV</option>
          </select>
        </div>

        <div class="menu">
          <select multiple id="multiple" class="multiple"...

CSS

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");

.container{
    width: 100%;
    margin-left: 400px;
}

#spanning{
    color: #06a3e9;
}

.nav ul{
    width: 150px;
    float: left;
    background-color: #dadada;
    padding: 0px;
    margin: 0px;
}

.nav li{
    list-style-type: none;
}

.nav a{
    color:#000;
    cursor:pointer;
    display: block;
    line-height: 40px;
    text-indent: 10px;
    text-decoration: none;
    font-weight: bold;
}

.nav ul ul li{
    display: none;
}

.nav li:hover ul li{
    display: block;
}

.subnav ul{
    position: relative;
    background: #dadada;

}

#labels{
    position: relative;
    width: 250px;
    top:80px;
    float: left;
}

h3{
    margin: 0px 0px 20px 0px;
}

#fields{
    position: relative;
    width: 250px;
    top:80px;
    float: left;
}

.element{
    margin-bottom: 23px;
    border: 1px solid #dadada;
    border-color:  #06a3e9;
    box-shadow: 0 0 1px lightblue;
}

.different{
    margin-top: 4px;
    margin-bottom: 22px;
}

.value{
    margin-bottom: 23px;
}

.heading, .feedback{
    margin-top: 43px;
}

.preference{
    border-color:  #06a3e9;
    box-shadow: 0 0 1px lightblue;
}

.multiple{
    border-color:  #06a3e9;
    box-shadow: 0 0 1px lightblue;
    margin-top: 20px;
}

textarea{
    margin-top: 20px;
    border: 1px solid  #06a3e9;
    box-shadow: 0 0 1px lightblue;
}

a{
    color: #06a3e9;
}

.final{
    margin-top: 15px;
}

.feedback{
    margin-top: 73px;
}

#submit, #reset{
    border: 1px solid #dadada;
    border-color:  #06a3e9;
    box-shadow: 0 0 1px lightblue;
    border-radius:5px;
}

input[type="checkbox"]{
    display: none;
}

label:before{
    width: 1em;
    display: inline-block;
}

label{
    margin-right: 5px;
}

input[type="checkbox"] + label:before{
    font-family: FontAwesome;
    display: inline-block;
    content: "\f096";
    letter-spacing: 5px;
    color: #06a3e9;
    display:...

JavaScript

window.validate = function() {

    var valid = true;
    
  var checkbox1 = document.getElementById('three').checked;
  var checkbox2 = document.getElementById('four').checked;
  var checkbox3 = document.getElementById('five').checked;
  var checkbox4 = document.getElementById('six').checked;

  if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == true) {
    if (referenceToForm.elements["usrgrp[]"].selectedIndex == -1) {
      alert("Please enter all the required values");
        valid = false;
    }
  }
  if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == false) {
    if (referenceToForm.elements["usrgrp[]"].selectedIndex == -1) {
      alert("Please enter all the required values");
        valid = false;
    }
  }
  if ((checkbox1 || checkbox2 || checkbox3 || checkbox4) == false) {
    if (referenceToForm.elements["usrgrp[]"].selectedIndex != -1) {
      alert("Please enter all the required values");
        valid = false;
    }
  }    
    
    if (document.getElementById('multiple').value == -1)
    {
      alert("Please enter all the required values");
        valid = false;
    }
    
    if (document.getElementById('preference').value == -1)
    {
      alert("Please enter all the required values");
        valid = false;
    }
    
    if (valid)
    {
        document.getElementById('submit').click();
    }
}