<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<form id="campaign-form">
<div>
<label for="title"><h3>Title:</h3>
<input id="title" />
</label>
<div id="title-error"></div>
</div>
<div>
<label for="phone"><h3>Phone:</h3>
<input id="phone" />
</label>
<div id="phone-error"></div>
</div>
<div>
<label for="description"><h3>Description:</h3>
<textarea id="description"></textarea>
</label>
<div id="description-error"></div>
</div>
<div>
<label for="description"><h3>Category:</h3>
<select id="campaign_category_id">
<option>Select an item</option>
<option id="cat">Cat</option>
<option id="dog">Dog</option>
<option id="monkey">Monkey</option>
</select>
</label>
<div id="campaign_category_id-error"></div>
</div>
</form>
</body>
</html>
$(function() {
const inputs = $(":input, textarea, select");
inputs.on('blur', function(ev) {
var data = $('#campaign-form').serialize();
$.ajax({
url: "campaign/validate",
//type: "POST",
data: data,
cache: false,
dataType: 'json',
success: function(data) {
if (data) {
$.each(inputs, function(index, input) {
const id = jQuery(input).prop('id');
if (data.hasOwnProperty(id)) {
jQuery(input).addClass('input-error')
.removeClass('input-valid');
jQuery("#" + id + "-error").text(data[id]);
}
else {
jQuery(input).removeClass('input-error');
jQuery(input).addClass('input-valid');
jQuery("#" + id + "-error").text("");
}
});
}
}
});
});
});
.input-error {
border: 1px solid #F00;
}
.input-valid {
border: 1px solid #00F;
}
{ "title":"* The Campaign Title field is required.",
"description":"* The Description field is required.",
"campaign_category_id":"* The Campaign Category field is required."
}