входы с квадратными скобками в атрибуте имени

Question

Я много искал на этом форуме, чтобы решить эту проблему, но до сих пор не удалось. У меня есть форма с несколькими разделами <input>. В этой форме у меня есть поле пароля и поле пароля подтверждения, которое необходимо проверить с помощью первого пароля. Вот пример кода HTML:

<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 . . ."/> 

Оба входа имеют имя с квадратными скобками, например. "RegisterForm[password]". Если я использую атрибуты имени без скобок, то проверка выполняется, если я использую ее с помощью скобок, проверка не работает. Любые идеи о том, как преодолеть проблему квадратной скобки в атрибуте name без потери квадратных скобок?

Если бы я заменил атрибуты имени "password1" и "password2", тогда все будет работать так, как должно было быть.

Если у кого-то есть решение, пожалуйста, помогите мне! :-).

Answer 1

Прежде всего, я считаю, что это не очень хорошая практика, чтобы поместить много кода внутри on- атрибутов событий. Что касается меня, я предпочитаю определять некоторые функции в исходном файле javascript и использовать их, а не добавлять сложные выражения в атрибуты.

В любом случае проблема заключается в том, что form.RegisterForm[password2].pattern является неправильным способом доступа к вашему элементу ввода. В этом случае сначала form объект просматривается. Затем интерпретатор пытается найти свойство RegisterForm. Квадратные скобки - это еще один способ получить доступ к свойству объекта, но для этого требуется строка. В вашем случае идет password2идентификатор скорее, строковый литерал, и я считаю, что он попытается прочитать значение переменной с тем же именем и искать свойство в RegisterForm в зависимости от результата. Таким образом, полное выражение недействительно и, скорее всего, завершится неудачно на этапе RegisterForm.

Но вы все еще можете получить доступ к входу по имени, содержащий квадратные скобки, например, с помощью querySelector() функции:

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

Следующего фрагмента коды работает, как ожидалось: если введенный пароль неверен он устанавливает пользовательское сообщение действия для ввода пароля , в противном случае он устанавливает пустое сообщение о достоверности и атрибут шаблона обновлений для ввода подтверждения.

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. структурируйте свой код, это поможет вам в будущем.