jQuery addClass example

Change class name on click in jQuery

by deswolf

HTML

<section id="inputs">
  <input type="number" name="input[]" />
  <input type="number" name="input[]" />
  <input type="number" name="input[]" />
</section>
<div style="margin-top:10px;">
  <button id="send">Send data</button>
</div>

<div id="output"></div>
<div id="errors"></div>

CSS

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

#inputs > input {
  width:50px;
  font-size:18px;
  padding:5px;
}

#output {
  background:#bdbdbd;
  color:#4f7b4f;
  font-family:Consolas;
  padding:30px;
  border-radius:5px;
  margin-top:10px;
}

#errors {
  margin-top:10px;
  color:red;
}

JavaScript

var numberRegex = new RegExp('^\\d+$');

$("#send").on("click", function(){
  sendData();
})

function sendData() {
	$("#errors").text("");
  var isValid = true;
	var inputElements = $("#inputs [name='input[]']");
  inputElements.each(function(i) {
  	if (!numberRegex.test($(this).val())) {
    	handleError("One or more of the inputs is not a whole number.");
      isValid = false;
   	}
	});
  if (isValid) {
    var inputs = inputElements.serializeArray();
    inputs = Array.from(inputs, x => parseInt(x.value));
    //Send inputs here:
    showOutput(inputs);
  }
}

// Just displaying output:
function showOutput(o) {
	$("#output").text(JSON.stringify(o));
}

function handleError(message) {
	$("#errors").text(message);
}