從ajax設置自定義的HTML5字段驗證消息

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

的問題（因爲提交事件將只有當它validest正確被解僱）也不會改變是在提交事件被解僱的地方，表格已經被驗證。如果你想自己做，你必須先做。

這意味着chaning事件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(); 
     } 
    });