基本的にこの登録システムでは、次のことを確認したいと思います。
すべてのフィールドが埋まっています。
ユーザー名の長さのチェック。
パスワードの長さのチェック。
メールが有効かどうかを確認しています。
メールが取れていないか確認中。
ユーザー名が取得されていないかどうかを確認しています。
パスワードが再パスワードと等しいかどうかを確認しています。
問題：
最初のステップはうまくいきますが、すべての入力を埋めた後、同じエラーが表示されますが、入力の周りに 2px の赤い境界線はありません。
それらをすべて埋めないと、同じエラーと赤い枠が表示されます。
基本的に、システムが現在行っていることをデバッグ/トラブルシューティングし、タイムアウトを使用して、正しく動作するかどうかをローカルホストでテストしたいと考えています。
私のコードがあります：
$("#center").on('click', function(e) {
// Prevent submit.
e.preventDefault();
/**
* Variables
**/
// Errors div block
var errors = $(".errors");
// Username input
var username = $("#username");
// Password input
var password = $("#password");
// Re-password input
var repassword = $("#repassword");
// Email input
var email = $("#email");
// Display name input
var display = $("#display");
// Validating all forms
var incomplete = $(':input', this.form).filter(function() { return $(this).val() == ''; });
// For submit, need $this var
var self = this;
/************************************/
/**
* Booleans
**/
var inputsAreFilled;
var validateAccount;
var validatedUsername;
var validatedEmail;
/***
* SYSTEM START
**/
validating("Validating Inputs...");
setTimeout(function() {
$(':input', this.form).each(function(i, ele) {
if (ele.value.trim() == "") {
ele.style.border = '2px solid red';
parseError("One of the fields are empty.");
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
restore();
}
else
{
$(this).removeAttr('style');
}
});
if (!incomplete.length) {
inputsAreFilled = true;
} else {
inputsAreFilled = false;
}
}, 1000);
if (inputsAreFilled) {
validating("Validating Data...");
setTimeout(function() {
// Username length
if (username.val().length() < 3) {
parseError("Your username is too short.");
username.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (username.val().length > 20) {
parseError("Your username is too long.");
username.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (password.val().length < 5) {
parseError("Your password is too short.");
password.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (password.val().length > 20) {
parseError("Your password is too long.");
password.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (display.val().length < 3) {
parseError("Your display name is too short.");
display.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (display.val().length > 20) {
parseError("Your display name is too long.");
display.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (!isValidEmailAddress(email.val())) {
parseError("Your email address is not valid");
email.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (password.val() != repassword.val()) {
parseError("Your passwords are not equal.");
password.css("border", "solid 2px red");
repassword.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else {
validateAccount = true;
}
}, 1000);
if (validateAccount) {
validating("Checking username...");
setTimeout(function() {
validateUsername(username.val()).done(function(data) {
if ($.trim(data) == 1) {
validatedUsername = false;
parseError("That username is already in use.");
username.css("border", "solid 2px red");
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else {
validatedUsername = true;
}
});
}, 1000);
if (validatedUsername) {
validating("Checking email...");
setTimeout(function() {
validateEmail(email.val()).done(function(data) {
if ($.trim(data) == 1) {
validatedEmail = false;
parseError("That email is already in use.");
email.css("border", "solid 2px red");
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else {
validatedEmail = true;
}
});
}, 1000);
}
else
{
validating("Global Check - Please wait");
setTimeout(function() {
if (validateAccount && validatedUsername && validatedEmail && inputsAreFilled)
{
validating("Done - Redirecting...");
self.form.submit();
}
else
{
parseError("An error has occured!");
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
}
}, 1000);
}
}
}
});
そして私の機能：
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
}
function restore() {
$("#center").attr('value','Continue');
$(".displaying_form").css("opacity", "1.0");
}
function parseError(message) {
$(".errors").html(message + "<span id='close'>X</span>");
$(".errors").fadeIn();
}
function validating(message) {
$("#center").attr('value', message);
$(".displaying_form").css("opacity", "0.6");
$("#center").css("cursor", "default");
}
function validateUsername(username, type) {
return $.post("js/ajax/ajax.php", { validateUsername : 1 });
}
function validateEmail(username, type) {
return $.post("js/ajax/ajax.php", { validateEmail : 1 });
}
基本的には次のステップには行かず、最初のステップにこだわる。すべての入力が完了すると、「フィールドの 1 つが空です」というエラーが表示されます。
なぜそれをしているのですか？なぜ続かないのでしょうか？