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 overe 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! :-).

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 overe 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! :-).

• javascript
• html
• validation
• input
• attributes

• You have an error in your javascript: form.RegisterForm.[password2].pattern is invalid. I could help if you'll provide a bit more code, it's not clear where form object es from. – Geradlus_RU Commented May 30, 2015 at 18:03
• much appreciate your help. I have provided more code and indeed also noticed the mistake (there was a . between Registerform.[password2], but the issue persist. – Pieter Visser Commented May 30, 2015 at 18:11
• Heh, you pasted a lot of useless HTML, sorry if I was unclear: I'm curious about form.RegisterForm: do you build this object yourself? The issue is that form.RegisterForm.[password2].pattern will try to access some property of RegisterForm object defined by variable password2, and I believe in your case this will evaluate to form.RegisterForm.[undefined]. BTW, are there any errors in browser console? – Geradlus_RU Commented May 30, 2015 at 18:18
• Also what is the reason why you want to keep square brackets in name attribure? – Geradlus_RU Commented May 30, 2015 at 18:24
• yes, you are right, bit too much code. i'll adjust a bit in a moment. The reason I use square brackets is because I also use yii framework that provides me with a plete form validation. I was not planning to strip this out, but thinking about it, it might actually better not to use two different ways of validating. – Pieter Visser Commented May 30, 2015 at 18:43

1 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 plex 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.