Convert response after submitting a form to an API - json

Question

I am sending the contents of a form, ie the name, upload fields etc to an api. After hitting the submit button, a new tab opens and I am getting a response:
{"success":false,"error":{"code":0,"message":"The given data failed to pass validation.","errors":{"something_id":["The something id field is required."]}}}
This (json?) doesn't make sense to a „normal“ user. So is it possible to get the response from the api before a new tab opens and display it in a way, so a user could understand? Like „Success – you can close the tab“ or „There was an error – you need to do this again“?
I don't know much about api and json, so it would be fine to learn if this could/would work?

Answer 1

here is a workaround:
First you need to load jquery on your page by adding this code within the tag or before the closing tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Then give your form an ID (say my_form_id)
Then add this within your HTML
<script>
$(document).ready(function() {
// listen for when the form is submitted
$('#my_form_id').submit(function(event) {
// get the form data
var formData = $('#my_form_id').serialize();
// send the form to API using Ajax
$.ajax({
type : 'POST', // define the type of HTTP we want to use
url : 'your_full_api_url', // the url where you want to POST the data
data : formData, // your form data object
dataType : 'json', // what type of data do you expect from the API
encode : true
}).done(function(data) {
if(data.success==='true') {
//No error... all went well
alert('Your data was successfully submitted');
//You can do any other thing you want here
} else {
//get the error message and alert it
alert(data.message);
}
});
event.preventDefault();
});
});
</script>
Now what happens is that each time the form is submitted, the script is called and the form data is collected and submitted to your API URL using ajax.
The response is then parsed and checked if data was successfully submitted.
If not, it will use the browser alert function to print our the error message from your API.