<input>
2 つの要素から値を取得し、それらを比較して等しいかどうかを確認する Dart スクリプトがあります。しかし、いくつかの奇妙な理由で、<input>
要素の 1 つの値は常に""
(内部にテキストを導入したにもかかわらず) です。コードは両方の入力で同じであり、そのうちの 1 つで完全に機能します。
入力は次のとおりです。
Contraseña:<input maxlength="30" name="psswd" type="password"><br>
Confirmar contraseña:<input maxlength="30" name="psswd-confirm" type="password"><br>
これは、それらの値が等しいかどうかをチェックする Dart コードです (ユーザーがボタンをクリックすると呼び出されます)。
InputElement passwordInput = querySelector('[name="psswd"]');
InputElement psswdConfirmInput = querySelector('[name="psswd-confirm"]');
if (passwordInput.value != psswdConfirmInput.value) {
showBlock(querySelector("#signup-psswd-error1"));
return;
}
関数は要素のshowBlock()
スタイルを変更して にするだけでdisplay: block
、問題はないと思います。
編集 フォーム全体のコードは次のとおりです。
<form name="signup" id="form-signup" action="http://localhost:8080" method="post">
<span id="signup-email-error1">Esta dirección de correo electrónico ya ha sido registrada.</span>
<span id="signup-email-error2">Las dos direcciones de correo electrónico no coinciden.</span>
<span id="signup-psswd-error1">Las dos contraseñas no coinciden.</span>
<span id="signup-empty-error1">Debes completar todos los campos.</span>
Correo electrónico:<input maxlength="30" name="email" type="email" value=""><br>
Confirmar correo:<input maxlength="30" name="confirm-email" type="email" value=""><br>
Contraseña:<input maxlength="30" name="psswd" type="password"><br>
Confirmar contraseña:<input maxlength="30" name="psswd-confirm" type="password"><br>
Nombre y apellidos:<input maxlength="30" name="name" type="text" value=""><br>
<button id="signup-submit">Crear cuenta</button>
</form>
要素は、<span>
デフォルトでは非表示で、エラー時にのみ表示されるエラー メッセージです。
編集 HTML は、w3c バリデーターによる検証でエラーも警告もなしに合格したため、おそらくバグは存在しません。バグに関連する dart イベント リスナー関数のコードは次のとおりです。
signupSubmit.onClick.listen((e) {
e.preventDefault();
for (int i = 0; i < signupForm.children.length; i++) { //AUTOMATIC HIDING
if (signupForm.children[i] is SpanElement) {
hide(signupForm.children[i]);
}
}
for (int i = 0; i < signupForm.children.length; i++) { //CHECK FOR EMPTY FIELDS
Element element = signupForm.children[i];
if (element is InputElement) {
if (element.value == "") {
showBlock(querySelector("#signup-empty-error1"));
return;
}
}
}
InputElement emailInput = querySelector('[name="email"]');
InputElement emailConfirmInput = querySelector('[name="confirm-email"]');
if (emailInput.value != emailConfirmInput.value) {
showBlock(querySelector("#signup-email-error2"));
return;
}
InputElement passwordInput = querySelector('[name="psswd"]');
InputElement psswdConfirmInput = querySelector('[name="psswd-confirm"]');
hide(passwordInput);
hide(psswdConfirmInput);
print('passwordInput: ${passwordInput.value}');
print('confirm: ${psswdConfirmInput.value}');
if (passwordInput.value != psswdConfirmInput.value) {
showBlock(querySelector("#signup-psswd-error1"));
print('psswd different');
return;
}
var req = new HttpRequest();
req.onReadyStateChange.listen((e) {
if (req.readyState == HttpRequest.DONE) {
print(req.responseText);
if (req.responseText == "regComplete") {
hide(overlay);
Element newel1 = new HeadingElement.h1();
newel1.text = "¡Gracias por registrarte!";
Element newel2 = new HeadingElement.h2();
newel2.text = "Se ha enviado un correo electrónico a la dirección proporcionada.";
Element newel3 = new HeadingElement.h2();
newel3.text = "Haz click en el enlace recibido para verificar la dirección y confirmar el registro.";
Element newel4 = new HeadingElement.h4();
newel4.text = "Del equipo de CampL con ♡";
querySelector("#welcome")
..children.clear()
..children.add(newel1)
..children.add(newel2)
..children.add(newel3)
..children.add(newel4);
} else if (req.responseText == "mailTaken") {
showBlock(querySelector("#signup-email-error1"));
}
}
});
req.open('POST', signupForm.action);
req.send(JSON.encode(serializeForm(signupForm)));
print('Data submitted!');
});