inputs with square brackets in the name attribute

Question

I searched a lot on this forum to solve this issue I have, but have not succeeded thus far. I have a form with several <input> sections. In this form I have a password field and a confirmation password field which needs to be validated with the first password. Here is HTML code example:

<input 
  title="Password should contain at least 6 characters or numbers" type="password"
  pattern=".{6,}"
  name="RegisterForm[password]"
  onchange="this.setCustomValidity(this.validity.patternMismatch ? this.title : ''); if(this.checkValidity()) form.RegisterForm[password2].pattern = this.value;"
  placeholder="Password..."/>

<input
  title="Please enter the same Password as above"
  type="password"
  pattern=".{6,}"
  name="RegisterForm[password2]"
  onchange="this.setCustomValidity(this.validity.patternMismatch ? this.title : '');"
  placeholder="Confirm Password . . ."/>

Both inputs have a name with square brackets, e.g. "RegisterForm[password]". If I use name attributes without the brackets the validation works, if I use it with brackets, the validation does not work. Any ideas how to overcome the square bracket issue in the name attribute without losing the square brackets?

If I would replace the name attributes with "password1" and "password2", then everything works as it supposed to do.

If anyone has the solution, please help me out! :-).

Answer 1

First of all I think this is not good practice to put much code inside on- event attributes. As for me, I prefer to define some functions in javascript source file and use them rather than put complex expressions into attributes.

Anyway, the issue is that form.RegisterForm[password2].pattern is wrong way to access your input element. In this case first form object is looked up. Then interpreter tries to look up RegisterForm property. Square brackets is another way to access object's property, but it requires a string. In your case there goes password2 identifier rather that string literal, and I believe it will try to read the value of variable with same name and look up property in RegisterForm depending on result. So entire expression is invalid and likely will fail early at RegisterForm step.

But you still can access your input by name containing square brackets, for example using querySelector() function:

var passwordInput = document.querySelector('input[name="RegisterForm[password]"');
var confirmInput = document.querySelector('input[name="RegisterForm[password2]"');

Following code snippet works as expected: if entered password is invalid it sets custom validity message to password input, otherwise it sets empty validity message and updates pattern attribute of confirmation input.

function validatePassword() {
    var self = document.querySelector('input[name="RegisterForm[password]"]');
    var conf = document.querySelector('input[name="RegisterForm[password2]"]');
          
    self.setCustomValidity(self.validity.patternMismatch ? self.title : '');
          
    if (self.checkValidity()) {
        conf.setAttribute("pattern", self.value);
    }
}

function validateConfirm () {
    var self = document.querySelector('input[name="RegisterForm[password2]"]');
    self.setCustomValidity(self.validity.patternMismatch ? self.title : ''); 
}       

<input
     title="Password should contain at least 6 characters or numbers"
     type="password"
     required
     pattern=".{6,}"
     class="input_bx"
     name="RegisterForm[password]"
     oninput="validatePassword();"
     placeholder="Password..."/>

<input
     title="Please enter the same Password as above"
     class="input_bx"
     type="password"
     required pattern=".{6,}"
     name="RegisterForm[password2]"
     oninput="validateConfirm();"
     placeholder="Confirm Password . . ."/>

P.S. structure your code, this will help you in future.