javascript - inputs with square brackets in the name attribute -

i searched lot on forum solve issue have, have not succeeded far. have form several <input> sections. in form have password field , confirmation password field needs validated first password. here html code example:

<input    title="password should contain @ 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 same password above"   type="password"   pattern=".{6,}"   name="registerform[password2]"   onchange="this.setcustomvalidity(this.validity.patternmismatch ? this.title : '');"   placeholder="confirm password . . ."/> 

both inputs have name square brackets, e.g. "registerform[password]". if use name attributes without brackets validation works, if use brackets, validation not work. ideas how overcome square bracket issue in name attribute without losing square brackets?

if replace name attributes "password1" , "password2", works supposed do.

if has solution, please me out! :-).

first of think not practice put code inside on- event attributes. me, prefer define functions in javascript source file , use them rather put complex expressions attributes.

anyway, issue form.registerform[password2].pattern wrong way access input element. in case first form object looked up. interpreter tries registerform property. square brackets way access object's property, requires string. in case there goes password2 identifier rather string literal, , believe try read value of variable same name , property in registerform depending on result. entire expression invalid , fail @ registerform step.

but still can access input name containing square brackets, example using queryselector() function:

var passwordinput = document.queryselector('input[name="registerform[password]"'); var confirminput = document.queryselector('input[name="registerform[password2]"'); 

following code snippet works expected: if entered password invalid sets custom validity message password input, otherwise sets empty validity message , 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 @ least 6 characters or numbers"       type="password"       required       pattern=".{6,}"       class="input_bx"       name="registerform[password]"       oninput="validatepassword();"       placeholder="password..."/>    <input       title="please enter same password above"       class="input_bx"       type="password"       required pattern=".{6,}"       name="registerform[password2]"       oninput="validateconfirm();"       placeholder="confirm password . . ."/>

p.s. structure code, in future.