如何关注动态表单的第一个无效输入字段？

编程问答 2022-05-29

问题描述

我有包含所有动态字段（ID、名称、占位符等...）的表单

喜欢下面..

<input  onkeyup="Obj.formevent(event,\'frmlogin\');" type="<?PHP echo $type; ?>" name="<?PHP echo $name; ?>" class="<?PHP echo $class; ?>" id="<?PHP echo $id; ?>" placeholder="<?PHP echo $placeholder; ?>" title="<?PHP echo $title; ?>" />

我想关注第一个无效字段

下面是我的 java 脚本代码，我在其中进行验证并显示错误消息

formLogin: function(e) {
    getData(url,function(data) {
        Object.keys(data).forEach(function(value) {
            i++;
            var validation_data = data[value];
            var field_value = document.getElementById(
              validation_data["field_id"]
            ).value;
            var validator = new RegExp(/^-?(\d+\.?\d*)$|(\d*\.?\d+)$/);
            if (!(validator.test(field_value))) {
                document.getElementById(
                        "error_" + validation_data["field_id"]
                    ).innerHTML =
                    '<span style="color:red;">' +
                    validation_data["valid_message"] +
                    "</span>";
                   //document.querySelector('input:invalid'); // tried this
                  //$("#form").find(":invalid").first().focus();
            }
        });
    });
   //document.querySelector('input:invalid');  // tried this
   //$("#form").find(":invalid").first().focus();
}

data 参数包含下面的对象（会有多个对象）

[{"field_id":"my_id","field_name":"Email:","field_type":"email","is_required":"1","maxlength":"40","minlength":"5","validation_type":"email","field_title":"Enter Email","valid_message":"Please enter your email","mandatory_message":"Please enter your email"},{"field_id":"my_id2","field_name":"Password:","field_type":"password","maxlength":"30","minlength":"6","validation_type":"password","field_title":"Password","valid_message":"Please enter your password","mandatory_message":"Please enter your password"`enter code here`}]

我尝试将下面的代码放在 foreach 上，但它专注于最后一个字段 也试过把 foreach 放在外面但不起作用

document.querySelector('input:invalid');
$("#form").find(":invalid").first().focus();

如何关注第一个无效字段？

请帮忙！！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

focusfocusformvalidation.iojavascriptonfocus