設置來自Ajax的自定義HTML5字段驗證消息

Question

我將如何實現來自服務器的自定義錯誤消息，以顯示為默認HTML 5錯誤消息之一。

我現在在這 但是問題是它只在第二個提交上顯示消息，即使它從服務器上沒問題也不會更改（因為只有在最正確的情況下才會觸發Submit事件）

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