JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<form action="/tcgsave/" method="POST" onsubmit="return" name="mainForm" id="register-form">
<table>
    <tr>
        <td>
            <select id="id_selectedKeyword" name="id_selectedKeyword" class="required">
                <option></option>
                <option value="hello">hello</option>
                <option value="hi">hi</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
          <input id="id_keywordName" name="id_keywordName" class="required" />
        </td>
    </tr>
    <tr>
        <td>
            <input id="somesubmit" type="submit" class="submit" value="Submit" />
        </td>
    </tr>
</table>  
</form>

CSS

::-moz-selection {
  background-color: #2d8ff0;
  color: white;
  text-shadow: none;
}

::selection {
  background-color: #2d8ff0;
  color: white;
  text-shadow: none;
}

input[type="text"], input[type="number"], select, textarea, input[type="password"] {
  background: white;
  border: 1px solid #ababab;
  padding: 3px;
  margin-right: 1%;
  height: 29px;
}

input[type="text"]:focus, input[type="number"]:focus, select:focus, textarea:focus,

input[type=text].highlight {
	font-size:150%;
	color:red;
    border: 1px solid red;
}

JavaScript

$("#register-form").submit(function(){
    var counter = 0;
    $(".required").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).addClass("highlight");
            counter++;            
        }
        else{
            $(this).removeClass("highlight");
        }
    });
    console.log(counter);
    var isFormValid = (counter < 2);
    if (!isFormValid) alert("Please fill in the required field (indicated by *)");
    return isFormValid;
});