jQuery addClass example

Change class name on click in jQuery

by Andreas Strauman

HTML

<form id="serialform">
  <div id="banner-message">
    <p><input type="text" id="serial" value="3287-123456"></p>
    <p id="errmsg"></p>
    <button type="submit">Check serial</button>
  </div>
</form>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

$("#serialform").submit(function(event) {
      // If you write return false; in here, then
      // the form will not get sent.
      // if you write return true; then the form will
      // get sent:
      event.preventDefault();
      // Get the value of the textbox
      inputVal = $("#serial").val();
      // From @user1515791 answer
      // Split it at the dash (-)
      console.log(inputVal.indexOf('-'));
      if (inputVal.indexOf('-') != 4) {
        $("#errmsg").html("Wrong format. Needs four numbers before dash");
        return false;
      }
      var seqs = inputVal.split('-');
      var seq1 = seqs[0];
      var seq2 = seqs[1];
      // seq1 now contains abcd
      // and sec2 contains efghij
      if (isNaN(parseInt(seq1)) || isNaN(parseInt(seq2))) {
        $("#errmsg").html("Got non-numbers in the sequence");
        return false;
      }
      // You can extract the numbers to variables
      // like in your question like this
      a = seq1[0];
      b = seq1[1];
      c = seq1[2];
      d = seq1[3];
      e = seq2[0];
      f = seq2[1];
      //...
      j = seq2[5];
      if (a != 1 && a != 2) {
        $("#errmsg").html("the first number is not 1 or 2");
        return false;
      }
      f = f * 2;
      // ...
      return false;
    })