How to fix: 'This field is required' error in bookmarklet

Problems creating an autologin bookmarklet for the mongodb university site (https://university.mongodb.com/login), the fields seem to be empty even if the data have been entered, the error disappears if I delete/add some letters and then return to the original data.

Checking the Html:

'Email' field:

input name="email" class="css-1d3375f e15weblb1" id="email" required="" type="email" value="" autocomplete="email"
'Password' field:

input name="password" class="css-1d3375f e15weblb1" id="password" required="" type="password" value="" autocomplete="current-password"
'Sign in' button:

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

With this informations i can create my personal autologin bookmarklet:

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

The fields are filled, the button is activated but the fields are signaled as empty and I receive an error in the console: HTTP400: INVALID REQUEST - The server cannot process the request because the syntax is invalid. (Fetch) POST - https://university.mongodb.com/login

The error disappears if I delete/add some letters and then return to the original data. Example: email: 'myPersonalEmail' password: 'myPersonalPassword' //Changing both fields… email: 'myPersonal' password: 'myPersonal' //Returning to the initial values (the right ones)… email: 'myPersonalEmail' password: 'myPersonalPassword' //Clicking on the button everything works beautifully

Soo how can i fix?

Solution

The problem seems to be that the internal state of the app is not being updated when you change the input values. Therefore, when you click on the submit button the data (email and password) is not being sent to the server. You can check that on the Network tab of the developer tools.

In order for the script to work you have to manually trigger the input event on the inputs after changing its values. The thing is, the page is built with the React library and all the events are really synthetic events.

So, triggering events in this situation is a bit trickier than it normally would. The function setValue changes the input value and triggers the event. The final code would look like:

(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();
})();