<async-editable-field>

<async-editable-field> is an editable field component which can validate input and POST asynchronously

<async-editable-field
    id="myField"
    name="fieldName"
    value="Field Value" 
    url="http://httpstat.us/200?sleep=750"
    save-text="Update"
    cancel-text="Cancel">
</async-editable-field>

<script>
    var editableField = document.querySelector('async-editable-field#myField');

    editableField.successResponseCallback = function(response, xhr) {
      alert("[" + xhr.status + "] Success: " + response);
    };

    editableField.errorResponseCallback = function(response, status) {
      alert("[" + status + "] Response: " + response);
    };
        
    editableField.validationFunction = function(value) {
        var reg = new RegExp(/^\d+$/);
        if (!reg.test(value)) {
            this.warningText = "Value must only contain numbers!";
            return false;
        }
        return true;
    };
</script>