我无法通过将值添加到浏览器控制台的输入来验证此反应表单

Posted 2023-02-23

【中文标题】我无法通过将值添加到浏览器控制台的输入来验证此反应表单

【英文标题】：I cant validate this react form from adding values to input from browser console

【发布时间】：2019-09-28 14:56:48

【问题描述】：

我尝试在浏览器控制台中使用 javascript 填写并验证此表单： https://www.dacia.fr/contact/reserver-un-essai/coordonnees.html?modelURI=https%3A%2F%2Ffr.co.rplug.renault.com%2Fproduct%2Fmodel%2F52B%2Fsandero%2Fc%2FA-ENS_0MDL2P1SERIELIM4_-TERPL

问题是当我使用

为输入设置值时

element.value = 'myvalue' 

或

element.setAttribute('value', 'myvalue') 

我提交了表单，这个没有经过验证。

请帮帮我，我什么都试过了。 :(

我也试过了： 我试过了，但没有用。也许我做错了什么？

 var element = document.getElementById("contactFormFirstName");
    var ev = new Event('input',  bubbles: true);
    element.value = "qsd";
    element.defaultValue = "qsd";
    element.dispatchEvent(ev);

    var element = document.getElementById("contactFormLastName");
    var ev = new Event('input',  bubbles: true);
    element.value = "qsd";
    element.defaultValue = "qsd";
    element.dispatchEvent(ev);

    var element = document.getElementById("contactFormEmail");
    var ev = new Event('input',  bubbles: true);
    element.value = "[e-mail]";
    element.defaultValue = "[e-mail]";
    element.dispatchEvent(ev);

    var element = document.getElementById("contactFormPhone");
    var ev = new Event('input',  bubbles: true);
    element.value = "0612326546";
    element.defaultValue = "0612326546";
    element.dispatchEvent(ev);

    document.querySelector('form input[name="identity[title]"][value="M"]').checked = 'checked';
    document.querySelector('form input[name="identity[title]"][value="M"]').click();
    document.querySelector(' form input[name="optin[email]"][value="N"]').checked = 'checked';
    document.querySelector(' form input[name="optin[email]"][value="N"]').click();

document.querySelector('form button[type="submit"]').click()

【参考方案1】：

您必须触发事件而不是设置值 - 因此反应代码会将其作为用户输入处理。例如：

var element = document.getElementById("contactFormFirstName");
var ev = new Event('input',  bubbles: true);
element.value = "YYYY";
element.defaultValue = "YYYY";
element.dispatchEvent(ev);

【讨论】：

我试过了（我用我改变的内容修改了线程的描述）但它没有用。我做错什么了吗 ？您可以在表单的 url 上的控制台中尝试它：/ 我很绝望 :D ！

也许有一种方法可以模拟在字段中键入或其他内容？或者也许 react 等待一个特定的事件？

输入组件截图如下：jerchassigneux-frontend.fr/screenshot.jpg