5 つのフィールドを持つフォームがあります。first name、last name、username、passwordおよびpasswordConfirmation。
最初に言いたいのは、最も複雑な方法は望んでいないということです。これは、ライブになることのない非常に単純な Web サイト用であり、純粋にデモンストレーションを目的としたものであり、エラーのキャッチについて心配する必要はありません。有害なユーザー入力。
これまでのところ、私はこれを持っています：
function validateRegistrationForm(firstName, lastName, username, password, passwordConfirmation) {
alert("validate form function has been called");
//alert("function has been called");
//---
var firstName = firstName;
//alert(firstName);
var lastName = lastName;
//alert(lastName);
var username = username;
//alert(username);
var password = password;
//alert(password);
var passwordConfirmation = passwordConfirmation;
//alert(passwordConfirmation);
//---
//**The code that I have sectioned off here, I am unsure whether I need it or not, could someone please explain to me why I would do this, and not just reference the parameters in the function directly?**
// Check here if all the fields in the registeration form have been filled.
if ( firstname == null || firstname == "" ) {
//firstname hasn't been filled out
}
if ( lastName == null || lastName == "" ) {
//lastname hasn't been filled out
}
if ( username == null || username == "" ) {
//username hasn't been filled out
}
if ( password == null || password == "" ) {
//password hasn't been filled out
}
if ( passwordConfirmation == null || passwordConfirmation == "" ) {
//passwordconfirmation hasn't been filled out
}
}
各フィールドが入力されているかどうかを確認する方法が必要です（ここにあると思います）。そうでない場合は、問題の入力要素の周りに赤い枠線やメッセージなどの通知を生成します問題を解決する方法について説明します。これは css で実行できることは知っていますが、最も効率的な方法はわかりません。
現在、次の 2 つの関数を作成しました。
function generateError(messageText, elementIdentifier) {
alert("error generator called");
//var element = document.getElementById(elementID);
//var error = document.createTextNode(message);
//element.innerHTML = message;
alert("Element: " + elementIdentifier + ", Reason: " + messageText);
}
function validatePassword(password, passwordConfirmation) {
alert("password check called");
if (password == passwordConfirmation) {
if (password.length < 8) {
//password too short
//alert("password\'s match but they are too short");
return false;
} else {
//passwords match and the right length
//alert("password\'s match and they are 8 characters or longer");
return true;
}
} else {
//the two do not match
//alert("they don\'t match")
generateError("Passwords don\'t match", "password");
return false;
}
}
このvalidatePassword()関数は、パスワードとパスワードの確認を 2 つのパラメーターとして受け取ります。これは既に機能していると思います。生成されたエラーをgenerateError()関数に渡して、それらをすべて配列に格納し、それらを 1 つずつループして表示します。ユーザーは何が悪いのですか。