从ajax

Question

如何实现来自服务器的自定义错误消息，以显示默认的HTML 5错误消息之一。

我现在在这里。但是问题是它只在第二次提交时显示消息，即使它从服务器获得好处也不会改变（因为提交事件只会在最正确的情况下被触发）

putRequest.onreadystatechange = function() {
    if (putRequest.readyState == XMLHttpRequest.DONE) {
        if (putRequest.status == 200) {

            var json = eval("(" + putRequest.responseText + ")");

            if (!json.success) {
                submitInput.setCustomValidity(json.message);
                submitInput.focus();
                return;
            }else submitInput.setCustomValidity('');

            // go on

        } else {
            alert('An API error occurred');
        }
    }
}

submitNew.addEventListener('submit', function(e) {
    e.preventDefault();

    putRequest.open("GET", "index.php?add&inputURL=" + submitInput.value, true);
    putRequest.send();

});

Answer 1

问题是，在触发提交事件时，表单已经过验证。如果你想自己做，你必须先做。

这意味着将按钮

上的事件submit定位到click

    putRequest.onreadystatechange = function() {
        if (putRequest.readyState == XMLHttpRequest.DONE) {
            if (putRequest.status == 200) {

                var json = eval("(" + putRequest.responseText + ")");

                if (!json.success) {
                    submitInput.setCustomValidity(json.message);
                    submitInput.focus();

                    return;
                } else submitInput.setCustomValidity('');

                newResultAnswer.innerHTML = json.message;

                newCreateView.style.display = "none";
                newResultView.style.display = "block";

            } else {
                alert('An API error occurred');
            }
        }
    }

    submitForm.addEventListener('submit', function(e) {
            e.preventDefault();
    });

    submitButton.addEventListener('click', function(e) {
            putRequest.open("GET", "index.php?add&inputURL=" + submitInput.value, true);
            putRequest.send();
    });

请记住还要在输入字段中按下输入键，该字段也会触发提交。要抓住它，你必须追加它。

    submitInput.addEventListener('keydown', function(e) {
        if(e.keyCode == 13) {
            putRequest.open("GET", "index.php?add&inputURL=" + submitInput.value, true);
            putRequest.send(); 
        }
    });