使用 javascript 设置输入值不通过“有错误”验证答案

【问题标题】：Setting value of input with javascript dont pass "has-error" validation使用 javascript 设置输入值不通过“有错误”验证
【发布时间】：2022-06-28 06:15:45
【问题描述】：

我正在尝试使用纯 javascript 模拟登录，但是当我尝试设置值时遇到问题，

我正在使用这个函数来模拟点击事件，它起作用了，它改变了显示的值

var input = document.querySelectorAll("input")[1];
input.focus(); // you can also use input.focus()
input.click();
input.value="";

var text = "22399999999";
var l=text.length;
var current = 0;
var time = 100;


var write_text = function() {
  input.value+=text[current];
  if(current < l-1) {
    current++;
    setTimeout(function(){write_text()},time);
  } else {
    input.setAttribute('value',input.value);
  }
}
setTimeout(function(){write_text()},time);

var input2 = document.querySelectorAll("input")[2];
input2.focus(); // you can also use input.focus()
input2.click();

input2.value="";

var text2 = "1111";
var l2=text2.length;
var current2 = 0; 


var write_text2 = function() {
  input2.value+=text[current2];
  if(current2 < l2-1) {
    current2++;
    setTimeout(function(){write_text2()},time);
  } else {
    input2.setAttribute('value',input2.value);
  }
}
setTimeout(function(){write_text2()},time);

但是，这只会使所需的验证生效。

但是，如果我点击并用键盘敲击，显示文本不会改变元素的值，但验证错误通过。

【问题讨论】：

你还没解决这个问题？
不行，问题依旧

标签： javascript

【解决方案1】：

您应该在更新值后发送change 事件。

setTimeout(function(){write_text()},time);

input.dispatchEvent(new Event('change'));

然后你可以强制更新验证状态。

input.reportValidity();

【讨论】：

【解决方案2】：

这是如何解决的，我不知道为什么浏览器的“值”停止工作，但现在这样解决了。

function setValueAndFireInputEvent(elem, value) {
  elem.value = value;
    $(elem).trigger("input");
}

var user = document.querySelector("input[name=User]");
setValueAndFireInputEvent(user, "CEDULA_HEERE");

var pass = document.querySelector("input[name=Password]");
setValueAndFireInputEvent(pass, "PASSWORD_HERE");

【讨论】：