Для меня я вижу ряд возможных проблем. Я попытался удалить их с помощью следующего примера кода. Я предполагаю, что /users вернет что-то , полезное для проверки и оповещения члена, если есть ошибка с доступом к /users или обработкой данных.
Использование атрибута required <input> не сделает ничего очевидного в вашем коде, поскольку <button> имеет вызов onclick=signUp(), который сработает до проверки браузера. С вашим текущим кодом значения формы (присутствующие или нет) будут по-прежнему отправляться на /users, поскольку эти значения не проверяются.
Вам необходимо переместить вызов signUp() на <form>, если вы хотите, чтобы проверка браузера была запущена.
Чтобы проверить это, удаление onclick=signUp() в <button> покажет вам окно с подсказкой браузера, в котором указано значение.
настаивают на использовании AJAX для публикации данных формы, перенос чека на отправку <form> - идея, и лично я все равно буду проверять значения - просто хорошая практика.
Следующая проблема - это вы не ждем возврата успешного или неудачного ответа от /users. На самом деле, вы слепо перенаправляете на main.html. Если будет ошибка, пользователь никогда не узнает. Это очень плохой пользовательский опыт.
Это исправлено в примере кода, проверяя ответ с обратным вызовом, проверяя значение этого ответа и затем предупреждая участника или перенаправляя, если нет ошибки.
var users = {};
function ajaxPost(url,postData,callFunc) {
var http = new XMLHttpRequest();
if(! http){
return false;
}
http.onreadystatechange=function(){
if((http.readyState == 4) && (http.status == 200)) {
if(callFunc){
callFunc(http.responseText);
}
}
}
http.open('POST',url,true);
http.send(postData);
}
function validResult(str) {
if (str == "valid") {
// go to the logged in page
window.location = "main.html";
} else {
console.log("invalid result, let the user know");
}
}
function signUp(e) {
if(e){e.stopPropagation();e.preventDefault();}
var d = document.getElementById("signupForm").querySelectorAll("input");
var i, max = d.length;
// Quick check for values only. No check for the format of the values.
// This is good practice as a browser may still ignore the `required`
// attribute.
for(i=0;i<max;i++) {
d[i].value = d[i].value.trim();
if (d[i].value) {
users[d[i].name] = d[i].value;
} else {
// An alert would be better for the user here.
console.log("Missing value for ["+ d[i].name +"]");
// Go no further if there is a missing value.
return;
}
}
// at this point, all values added to the users object.
console.log("users:["+ JSON.stringify(users) +"]");
// Send the data and wait for a return value from /users
// --- remove comment on the following line to post ----
//ajaxPost("/users",JSON.stringify(users),validResult);
}
window.onload = function(){
var c = document.getElementById("signupForm");
if (c) {
c.addEventListener("submit",signUp,false);
}
}
<form id="signupForm">
<label for="firstName"><b>First Name</b></label>
<input type="text" id="firstName" placeholder="Enter First Name" name="firstName" required>
<p>
<label for="email"><b>Email</b></label>
<input type="email" id="email" placeholder="Enter Email" name="email" required>
<p>
<button id="submit" type="submit">Check and submit</button>
</form>