<div class="text">
<label class="text__label" for="solo_textinput">Label</label>
<input class="text__input" type="text" name="solo_textinput">
<span class="text__help">Helpful text goes here</span>
<span class="text__error">Error message is hidden</span>
</div>
<form class="example-form-short">
<div class="text">
<label class="text__label" for="example_textinput">Label</label>
<input class="text__input" type="text" name="example_textinput">
<span class="text__help">Helpful text goes here</span>
<span class="text__error">Error message is hidden</span>
</div>
<button class="btn btn--lightbg">Submit To Trigger Error</button>
</form>
<form class="example-form-full-width">
<div class="text full-width" style="width: 600px; max-width: 100%;">
<label class="text__label" for="example_textinput-fullwidth">Label</label>
<input class="text__input" type="text" name="example_textinput-fullwidth">
<span class="text__help">Helpful text goes here</span>
<span class="text__error">Error message is hidden</span>
</div>
<button class="btn btn--lightbg">Submit To Trigger Error</button>
</form>
<script>
$(document).ready(function() {
$(".example-form-short").submit(function(e) {
e.preventDefault();
var jsonReturned = {
"errors": [{
"example_textinput": "Error message here"
}]
};
var errorsArr = jsonReturned.errors;
if (errorsArr.length) {
for (var i = 0; i < errorsArr.length; i++) {
for (key in errorsArr[i]) {
var inputFieldName = key;
var inputErrorMessage = errorsArr[i][key];
triggerError(inputFieldName, inputErrorMessage);
}
}
}
})
$(".example-form-full-width").submit(function(e) {
e.preventDefault();
var jsonReturned = {
"errors": [{
"example_textinput-fullwidth": "Error message here"
}]
};
var errorsArr = jsonReturned.errors;
if (errorsArr.length) {
for (var i = 0; i < errorsArr.length; i++) {
for (key in errorsArr[i]) {
var inputFieldName = key;
var inputErrorMessage = errorsArr[i][key];
triggerError(inputFieldName, inputErrorMessage);
}
}
}
})
})
</script>