JSFiddle - React, Tailwind, and code Playground

by hiral

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<form>
  <div class="row">
    <input type="text" class="text" value="5,10,5-10,50">
    <select>
      <option value="">Select</option>
      <option>User 1</option>
      <option>User 2</option>
      <option>User 3</option>
    </select>
    <div class="error"></div>
  </div>
  <div class="row">
    <input type="text" class="text">
    <select>
      <option value="">Select</option>
      <option>User 1</option>
      <option>User 2</option>
      <option>User 3</option>
    </select>
    <div class="error"></div>
  </div>
  <div class="row">
    <input type="text" class="text">
    <select>
      <option value="">Select</option>
      <option>User 1</option>
      <option>User 2</option>
      <option>User 3</option>
    </select>
    <div class="error"></div>
  </div>
  <button type="submit">Submit</button>
</form>

CSS

.field-error {
  border-color: red
}

JavaScript

$(document).ready(function() {
  function pushError(error, err) {
    var msg = "<div>" + err + "</div>";
    if (error.indexOf(msg) < 0) {
      error.push(msg);
    }
  }

  function checkUser(n) {
    var i = 0,
      len = 0,
      currentuser = $(".row:eq(" + n + ")").find("select").val();
    if (n && currentuser) {
      len = n;
    }
    for (; i < len; i++) {
      var user = $(".row:eq(" + i + ")").find("select").val();
      if (user === currentuser) {
        return false;
      }
    }
    return true;
  }
  $("form").submit(function() {
    var data = [],
      error = [],
      scenario = [],
      max = 50,
      emptyError = "Please fill all fields.",
      typeError = "Please enter valid scenario range.",
      userError = "Please select different assignee.",
      scenarioError = "Scenario number should be between 1 and " + max;
    $(".row").each(function(index) {
      var $th = $(this),
        $text = $th.find(".text"),
        $assignee = $th.find("select"),
        $error = $th.find(".error"),
        text = $text.val(),
        assignee = $assignee.val(),
        reg = /^(?:\d|[1-9])(?: *-*(?:\d|[1-9]))?(?: *,*(?:\d|[1-9])(?: *-*(?:|\d|[1-9]))?)*$/,
        test = reg.test(text),
        user = checkUser(index);
      error.push([]);
      scenario.push([]);
      if (!text) {
        $text.addClass("field-error");
      } else {
        $text.removeClass("field-error");
      }
      if (!assignee) {
        $assignee.addClass("field-error");
      } else {
        $assignee.removeClass("field-error");
      }
      if (!text || !assignee) {
        pushError(error[index], emptyError);
      }
      if (assignee && !user) {
        pushError(error[index], userError);
      }
      if ((assignee && !user) || !assignee) {
        $assignee.addClass("field-error");
      } else {
        $assignee.removeClass("field-error");
      }
      if (text && !test) {
        $text.addClass("field-error");
        pushError(error[index],...