FormStuff

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)
});

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]);
}

$("form").serializeArray()

manually set validity on form field

https://developer.mozilla.org/en-US/docs/Web/API/ValidityState

1. 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>

2. 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();
}
...