Установить пользовательское сообщение проверки поля HTML5 от ajax

Question

Как реализовать собственное сообщение об ошибке, поступающее с сервера, для отображения как одного из сообщений об ошибках HTML 5 по умолчанию.

Я нахожусь здесь. Однако проблема в том, что отображается только сообщение на второй покориться и не изменится, даже если это получить нормально с сервера (так как представить событие будет срабатывать только тогда, когда он validest правильно)

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