Dart not getting input value

Question

I have a Dart script that gets the values from two <input> elements and compares them to check if they are equal. But for some weird reason the value for one of the <input> elements is always being "" (even though I have introduced text inside) The code is the same for both inputs, and for one of them it works perfectly.

These are the inputs:

Contraseña:<input maxlength="30" name="psswd" type="password"><br>
Confirmar contraseña:<input maxlength="30" name="psswd-confirm" type="password"><br>

And this is the Dart code that checks if their values are equal (it's called when the user clicks a button)

InputElement passwordInput = querySelector('[name="psswd"]');
InputElement psswdConfirmInput = querySelector('[name="psswd-confirm"]');
if (passwordInput.value != psswdConfirmInput.value) {
  showBlock(querySelector("#signup-psswd-error1"));
  return;
}

The showBlock() function only changes the style of the element to make it display: block, and I don't think there's the problem.

EDIT The code for the whole form is the following:

<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>

The <span> elements are error messages that are hidden by default and only show on error.

EDIT The HTML has passed without any error nor warning the validation by the w3c validator, so probably the bug isn't there. The code for the dart event listener function related to the bug is the following:

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!');
 });

Answer 1

In another form that was before this one there was another <input> field with name set to "psswd" so the program was getting the value from that first <input>. I've changed the name for that previous form (and the code in the server side) and now it works without problem.

Answer 2

I tried your code and it works.

I added the following code between querySelector and if and it prints the values I entered.

print('passwordInput: ${passwordInput.value}');
print('confirm: ${psswdConfirmInput.value}');

Output:

passwordInput: rr
confirm: rr