Как исправить ошибку: «Это поле обязательно для заполнения» в закладке

Question

Проблемы с созданием букмарклета автологина для сайта университета mongodb (https://university.mongodb.com/login), поля кажутся пустыми, даже если данные были введены, ошибка исчезает, если я удаляю / добавляю несколько букв, а затем возвращаюсь к оригиналуdata.

Проверка Html:

• Поле 'Email':

  input name = "email" class = "css-1d3375f e15weblb1" id= "email" требуется = "" type = "email" value = "" autocomplete = "email"

• Поле 'Password':

  имя входа = "пароль"class =" css-1d3375f e15weblb1 "id =" пароль "требуется =" "type =" пароль "value =" "autocomplete =" current-password "

• 'Войти в систему'button:

  button tabindex = "0" class = "css-1lcglra erk7wfm0" type = "submit"

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

javascript:(function(){
    document.getElementById('email').value='myEmail';
    document.getElementById('password').value='myPassword';
    document.getElementsByTagName('button')[0].click();
})();

Поля заполнены, кнопка активирована, но поля обозначены как пустые, и я получаю сообщение об ошибке в консоли: HTTP400: INVALID REQUEST - сервер не может обработать запрос, потому что синтаксис неверен.(Выборка) POST - https://university.mongodb.com/login

Ошибка исчезнет, ​​если я удалю / добавлю несколько букв, а затем вернусь к исходным данным.Пример: электронная почта: «myPersonalEmail» пароль: «myPersonalPassword» // Изменение обоих полей… электронная почта: «myPersonal» пароль: «myPersonal» // Возврат к исходным значениям (правильные)… электронная почта: «myPersonalEmail» пароль:'myPersonalPassword' // При нажатии на кнопку все работает прекрасно

Так, как я могу исправить?

Answer 1

Кажется, проблема в том, что внутреннее состояние приложения не обновляется при изменении входных значений.Поэтому, когда вы нажимаете кнопку отправки, данные (электронная почта и пароль) не отправляются на сервер.Вы можете проверить это на вкладке Сеть инструментов разработчика.

Чтобы скрипт работал, вы должны вручную вызвать событие ввода на входах после изменения его значений.Дело в том, что страница построена с библиотекой React, и все события являются действительно синтетическими событиями.

Таким образом, запуск событий в этой ситуации немного сложнее, чем обычно.Функция setValue изменяет входное значение и запускает событие.Конечный код будет выглядеть так:

(function(){
    function setValue(input, value) {
        var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;

        nativeInputValueSetter.call(input, value);

        var ev2 = new Event('input', { bubbles: true});
        input.dispatchEvent(ev2);
    }

    setValue(document.getElementById('email'), 'myEmail');
    setValue(document.getElementById('password'), 'myPassword');
    document.getElementsByTagName('button')[0].click();
})();