Здравствуйте. Нужно синхронизировать 2 поля и если значения этих полей при вводе не совпадают, показать setCustomValidity в одном из полей

Автор вопроса: Алексей

поля ввода

var selekt = document.querySelector('#el1');
var selekt1 = document.querySelector('#el2');

записываю в переменную изменения значения

var selektValue = selekt.addEventListener('change', function(){
return select.value; /или select.getAttribut('value');
});
var selektValue1 = selekt1.addEventListener('change', function(){
return select1.value; /или select1.getAttribut('value');
});

сравниваю и вывожу сообщение об ошибке

if (selektValue !== selektValue1) {
select1.setCustomValidity('значение должно быть равно inputValue');
}

пробовал другой вариант при отправке формы

var select = document.querySelector('#el1').value;
var select1 = document.querySelector('#el2').value;

кнопка отправки формы

var buttonSubmit = document.querySelector('.button');

функция сравнения значений и вывода сообщение об ошибке

var findDifference = function () {
  if (select !== select1) {
  select1.setCustomValidity('значение должно быть равно select');
   }
  };

если кнопка нажата, то сравниваем значение полей

buttonSubmit.addEventListener('click', findDifference); 

разметка

<form>
  <fielset>
   <label></label>
   <select>
    <option value1></option>
    <option value2></option>
    <option value3></option>
   </select>
 </fielset>
<fielset>
 <label></label>
  <select>
   <option value1></option>
   <option value2></option>
   <option value3></option>
  </select>
 </fielset>
 <fielset>
  <button type="submit">
 <button type="reset">
 </fielset>
</form>

Источник

Ответы (1 шт):

Автор решения: Denis640Kb

Вариант с селектами (Добавлено после изменений в вопросе)

    function check() {
        var input = document.querySelector("#el2");
        var input1 = document.querySelector("#el1").value;
        if (input.value != input1) {
            input.setCustomValidity('значение должно быть равно '+input1);
        } else {
            input.setCustomValidity("");
        }
    }

<form>
    <fielset>
        <label></label>
        <select id="el1">
            <option value=""></option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </fielset>
    <fielset>
        <label></label>
        <select id="el2"
                onchange="check();"
                required>
            <option value=""></option>
            <option value="3">3</option>
            <option value="2">2</option>
            <option value="1">1</option>
        </select>
    </fielset>
    <fielset>
        <button type="submit">Подтвердить</button>
        <button type="reset">Сброс</button>
    </fielset>
</form>

Вариант с полями ввода.

    function check() {
        var input = document.querySelector("#el2");
        var input1 = document.querySelector("#el1").value;
        if (input.value != input1) {
            input.setCustomValidity('значение должно быть равно '+input1);
        } else {
            input.setCustomValidity("");
        }
    }

<form>
    <input id="el1">
    <input id="el2"
           oninput="check();"
           required/>
    <button type="submit">Submit</button>
</form>

Если Вы хотите вставить текст в одно из полей (По Вашему коду во второе), то:

    dd.onclick = function () {
        var selekt = document.querySelector('#el1');
        var selekt1 = document.querySelector('#el2');
        var val1 = selekt.value;
        var val2 = selekt1.value;
        if (val1 !== val2) {
            selekt1.value = 'значение должно быть равно select';
        }

    };

<input id="el1">
<input id="el2">
<button id="dd" class=".button">Тык</button>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.