get form data

const data = Object.fromEntries(new FormData(document.forms.requestForm).entries());
console.log(data)      

document.querySelector('form').addEventListener('submit', (e) => {
    const data = Object.fromEntries(new FormData(e.target).entries());
    console.log(data)
});      

const formElem = document.getElementById("requestForm");

formElem.onformdata = (e) => {
    console.log('formdata fired');
    console.log(e)
    return false
    // modifies the form data      
};

formElem.addEventListener('submit', (e) => {
    // on form submission, prevent default      
    // e.preventDefault();      

    // construct a FormData object, which fires the formdata event      
    const formData = document.getElementById('requestForm')
    console.log(formData)
    console.log(e.target)

    alert("fuck me")
    // return false      
});      

function handleSubmit(e) {
    e.preventDefault();
    const formData = new FormData(e.target);
    const formProps = Object.fromEntries(formData);
    console.log("submit", formProps)

}

const requestForm = document.getElementById("requestForm");
requestForm.addEventListener("submit", handleSubmit);

function myFunction() {
    var elements = document.getElementById("myForm").elements;
    var obj = {};
    for (var i = 0; i < elements.length; i++) {
        var item = elements.item(i);
        obj[item.name] = item.value;
    }

    document.getElementById("demo").innerHTML = JSON.stringify(obj);
}      

const formData = new FormData(document.querySelector('form'))
for (var pair of formData.entries()) {
    console.log(pair[0] + ': ' + pair[1]);
}

JQuery

$("form").serializeArray()

Get POST payload

const constantMock = window.fetch;
window.fetch = function () {
    if (arguments[0] === '/api/req' && arguments[1].method === 'post') {
        bodyResults(arguments[1].body)
    }
    return constantMock.apply(this, arguments)
}


function bodyResults(reqBody) {
    console.log(reqBody)
}

Catch responses as well

const constMock = window.fetch;
window.fetch = function () {
    if (arguments[0] === '/api/req' && arguments[1].method === 'post') {
        bodyResults(arguments[1].body)
    }

    return new Promise((resolve, reject) => {
        constantMock.apply(this, arguments)
                    .then((response) => {
                        if (response.url.indexOf("/me") > -1 && response.type != "cors") {
                            console.log(response);
                            // do something for specificconditions
                        }
                        resolve(response);
                    })
                    .catch((error) => {
                        reject(response);
                    })
    });
}

function bodyResults(reqBody) {
    console.log(reqBody)
}

XMLHTTPRequest Intercept POST

(function () {
    var origOpen = XMLHttpRequest.prototype.send;
    XMLHttpRequest.prototype.send = function () {
        console.log('request started!');
        console.log(arguments[0]);
        this.addEventListener('load', function () {
            console.log('request completed!');
            console.log(this.status);
        });
        origOpen.apply(this, arguments);
    };
})();

JQuery

$(document).on("ajaxSend", function (e) {
    console.log("before request is sent");
}).on("ajaxComplete", function (e) {
    console.log("after success or error");
}).on("ajaxSuccess ", function (e) {
    console.log("on success");
}).on("ajaxError ", function (e) {
    console.log("on error");
});

Intercept XHR Requests

(function (open) {
    XMLHttpRequest.prototype.open = function (method, url, async, user, pass) {
        alert('Intercept');
        open.call(this, method, url + ".ua", async, user, pass);
    };
})(XMLHttpRequest.prototype.open);

manually set validity on form field

Validity State

with listener

var field = document.getElementById('field_robot');

field.addEventListener('input', function (event) {
    fieldValidator(event, (field.value == '42'));
});

function fieldValidator(event, condition) {
    var val = event.target.value;
    if (!condition) {
        event.target.setCustomValidity('invalid');
    }
    else {
        event.target.setCustomValidity('');
    }

}    

<form id="myForm">
    <input type="text" id="field_robot" name="">
    <input type="submit" id="submit" name="submit">
</form>      

core use case

// ...    

var email = emailInput.value;
emailInput.required = !!email.trim();
var reqAddRemove = emailInput.required
                   ? 'add'
                   : 'remove';

function setEmailInputValid() {
    emailInput.setCustomValidity('');
    errorBlock.html("").removeClass('emailValidationError').addClass('hidden');
    errorIcon.attr("class", "");
    errorIcon.parent().removeClass("has-error");
}

emailInput.previousElementSibling.classList[reqAddRemove]('req');

if (emailInput.required) {
    var inValidEmail = !AssessmentOrderEmailNotification.validateEmail(email);
    var inValidDomain = !AssessmentOrderEmailNotification.validateDomain(email);
    var respondentEmail = AssessmentOrderEmailNotification.respondentEmailCheck(email);

    if (inValidEmail || inValidDomain || respondentEmail) {
        emailInput.setCustomValidity('invalid');
        var errorMessage = inValidEmail
                           ? email + " is not a valid Email"
                           : (inValidDomain
                              ? email + " does not have a valid domain"
                              : "Error:  Email address cannot be the same as the assessment respondent.");
        errorBlock.html(errorMessage).removeClass('hidden').addClass('emailValidationError');
        errorIcon.attr("class", "glyphicon glyphicon-remove form-control-feedback");
        errorIcon.parent().addClass("has-error");
        event.target.previousSibling.classList.add('multi-input-height');
    }
    else {
        setEmailInputValid();
    }
}
else {
    setEmailInputValid();
}    