0

Генерируемая форма. Количество пунктов неизвестно. Поэтому 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>

3
  • 1
    А где пример JSON? Commented 19 дек. 2019 в 16:13
  • Добавил фрагмент Json, в таком виде он у меня отображается в console.log
    – Gagablik
    Commented 19 дек. 2019 в 16:17
  • 1
    То что вы добавили в вопрос, это не JSON. Commented 20 дек. 2019 в 5:47

3 ответа 3

3

мб так

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>

0
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>

0

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

let $form = $('form').find('input[name="name[]"]');
console.log(form.eq(3)) // Получите 4 элемент 
1
  • Но я не могу знать в каком пункте будет ошибка и как следствие я заранее не знаю, какой элемент мне понадобится. У меня в Json есть ключ с названием "test.3" (к примеру)
    – Gagablik
    Commented 19 дек. 2019 в 16:14

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.