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