Как обратиться к элементу из форму?

110
07 января 2022, 01:30

Генерируемая форма. Количество пунктов неизвестно. Поэтому name задал при помощи []. После проверки формы приходит JSON объект, в котором хранятся ошибки

errors:
    name.0: ["Поле name.0 обязательно для заполнения."],
    test.0: ["Поле test.0 обязательно для заполнения."]

Как, при помощи jQuery, выбрать input с ошибкой?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form> 
  <input type="text" name="test[]" value=""> 
  <input type="text" name="test[]" value=""> 
  <input type="text" name="test[]" value=""> 
  <input type="text" name="test[]" value=""> 
  <input type="text" name="name[]" value=""> 
  <input type="text" name="name[]" value=""> 
  <input type="text" name="name[]" value=""> 
</form>

Answer 1

мб так

let json = {"name.0": ["Поле name.0 обязательно для заполнения."],  
      "test.0": ["Поле test.0 обязательно для заполнения."]}; 
 
for(let item of Object.keys(json)) { 
  let [,name, index] = item.match(/(.*)\.(\d+)/);  
  console.log( $(`input[name='${name}[]']`)[index] ); 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form> 
  <input type="text" name="test[]" value="1"> 
  <input type="text" name="test[]" value="2"> 
  <input type="text" name="test[]" value="3"> 
  <input type="text" name="test[]" value="4"> 
  <input type="text" name="name[]" value="5"> 
  <input type="text" name="name[]" value="6"> 
  <input type="text" name="name[]" value="7"> 
</form>

Answer 2

let responseJson = '{ "errors": { "name.0": ["Поле name.0 обязательно для заполнения."], "test.0": ["Поле test.0 обязательно для заполнения."] } }';  
const parsed = JSON.parse(responseJson);  
 
const elems = [];  
Object.keys(parsed.errors || {}).forEach( 
  e => e.replace(/^([^.]+)\.([^.]+)$/,  
    (m, p1, p2) => elems.push($(`input[name="${p1}[]"]`).get(+p2))  
  ) 
);  
$(elems).css('border-color', 'red'); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form> 
  <input type="text" name="test[]" value=""> 
  <input type="text" name="test[]" value=""> 
  <input type="text" name="test[]" value=""> 
  <input type="text" name="test[]" value=""> 
  <input type="text" name="name[]" value=""> 
  <input type="text" name="name[]" value=""> 
  <input type="text" name="name[]" value=""> 
</form>

Answer 3

Подключаемся к форме, а потом ищем необходимые нам input. C помощью метода eq - выбираем нужный

let $form = $('form').find('input[name="name[]"]');
console.log(form.eq(3)) // Получите 4 элемент 
READ ALSO
jquery добавить get параметр

jquery добавить get параметр

при выборе select скрипт постоянно добавляет параметр, как его раз добавить и при следующих изменениях просто менять?

176
Вывод строки много раз JS [дубликат]

Вывод строки много раз JS [дубликат]

Нужно Нужно введенную строку вывести 10 раз, заранее спасибо!

125
Проблемы с установкой RxJS

Проблемы с установкой RxJS

Создал indexhtml и script

208