如何在文本字段中显示基本验证消息

约翰·多伊

我想在需要它的文本字段下方显示验证消息以及我找到的图像中的示例

例子

我的表单上有以下文本字段，它们各自的验证在Javascript 中完成

//Function to validate ticket form
function validate_form() {
    valid = true;

    if (document.ticketForm.matricula.value == "") {
        alert("Verify the data again, enter the license plate");
        valid = false;
    }

    if (document.ticketForm.nombre.value == "") {
        alert("Verify the data again, enter the name of the applicant");
        valid = false;
    }

    return valid;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<form name="ticketForm" method="post" onchange="validate_form();">
                <div id="informacionTicket" class="user">
                    <div class="card shadow mb-4">
                        <div class="card-body">
                            <div class="mb-4">
                                <div class="form-group">
                                    <label for="ticketIdAppliInput">License:</label>
                                    <input maxlength="9" required id="ticketIdAppliInput" type="text" name="matricula" onkeypress="if (isNaN(String.fromCharCode(event.keyCode))) return false;" class="form-control form-control-user" />
                                </div>
                                <div class="form-group">
                                    <label for="ticketNameAppliInput">Full name:</label>
                                    <input maxlength="100" id="ticketNameAppliInput" type="text" name="nombre" class="form-control form-control-user" />
                                </div>
                                <div class="form-group">
                                    <label for="ticketEmailAppliInput">Email:</label>
                                    <input maxlength="100" id="ticketEmailAppliInput" type="email" name="email" class="form-control form-control-user" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <button type="button" id="submit" class="btn btn-primary btn-user btn-block">Send</button>
</form>

我不想要的是alert在表格顶部显示那些烦人的东西

我希望消息像示例图像一样显示

更新：

试试这个可能的解决方案，但当输入一个值时，消息不再被删除

更新：

我尝试了@JarlikStepsto 的可能解决方案，但它仍然无法正常工作

function validate(field) {
    const validateables = document.getElementsByClassName('validateable');
    const input = field;
    if (!input.value == "") {
        input.classList.add('invalid');      
    } else {
        input.classList.remove('invalid');
    }

    if (!input.value == "") {
        input.classList.add('invalid');      
    } else {
        input.classList.remove('invalid');
    }
}

input {
    display: block;
}

.validation-message {
    display: none;
}

input.validateable.invalid + .validation-message {
    display: block;
    color: red;
}

<div class="form-group">
                                    <label class="required-field" name="matricula" for="ticketIdAppliInput">Matrícula:</label>
                                    <input onchange="validate(this)" maxlength="9" required="required" id="ticketIdAppliInput" type="text" name="matricula" onkeypress="if (isNaN(String.fromCharCode(event.keyCode))) return false;" class="form-control form-control-user validateable"/>
                                    <div class="validation-message">
                                        Verifique la información nuevamente, ingrese la matricula</div>
                                </div>
                                <div class="form-group">
                                    <label class="required-field" name="nombre" for="ticketNameAppliInput">Nombre completo:</label>
                                    <input onchange="validate(this)" maxlength="100" id="ticketNameAppliInput" type="text" name="nombre" class="form-control form-control-user validateable" />
                                    <div class="validation-message">
                                        Verifique la información nuevamente, ingrese el nombre
                                    </div>
                                </div>

更新 2：

I will explain it better, I have two fields that matter to me that are compulsory "Matricula" and "Nombre Completo", when I am filling out the third field I do not get the validation message, this is the code I have, will I be doing something wrong?

function validate(field) {
    const input = field;
    if (!input.value || input.value.length === 0) {
        input.classList.add('invalid');      
    } else {
        input.classList.remove('invalid');
    }
}

input {
    display: block;
}

.validation-message {
    display: none;
}

input.validateable.invalid + .validation-message {
    display: block;
    color: red;
}

<div class="form-group">
                                    <label class="required-field" name="matricula" for="ticketIdAppliInput">Matrícula:</label>
                                    <input onchange="validate(this)" maxlength="9" id="ticketIdAppliInput" type="text" name="matricula" onkeypress="if (isNaN(String.fromCharCode(event.keyCode))) return false;" class="form-control form-control-user validateable"/>
                                    <div class="validation-message">
                                        Verifique la información nuevamente, ingrese la matricula</div>
                                </div>
                                <div class="form-group">
                                    <label class="required-field" name="nombre" for="ticketNameAppliInput">Nombre completo:</label>
                                    <input onchange="validate(this)" maxlength="100" id="ticketNameAppliInput" type="text" name="nombre" class="form-control form-control-user validateable" />
                                    <div class="validation-message">
                                        Verifique la información nuevamente, ingrese el nombre
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="required-field" name="email" for="ticketEmailAppliInput">Email:</label>
                                    <input onchange="validate(this)" maxlength="100" id="ticketEmailAppliInput" type="email" name="email" class="form-control form-control-user validateable" />
                                    <div class="validation-message">
                                        Verifique la información nuevamente, ingrese el correo electronico
                                    </div>
                                </div>

Jarlik Stepsto

To show a validation message under the field you need a element to display it.

It could be any div, span or whatever you want.

In my example i will use a span to demonstrate how it works:

<input onchange="validate();" type="text" class="validateable" validation-pattern="[0-9]*" />
    <div class="validation-message">Only numbers are allowed in this field!</div>

now in the js code we just have to validate for the pattern and set a input to invalid if it does not match the pattern:

function validate(){
  const validateables = document.getElementsByClassName('validateable');
  Array.prototype.forEach.call(validateables, input => {
        const pattern = input.getAttribute('validation-pattern');
    if(!input.value.match('^' + pattern + '$')){
        input.classList.add('invalid');
    } else {
        input.classList.remove('invalid');
    }
  });
}

and the css to display validation text only if invalid:

.validation-message {
  display: none;
}

input.validateable.invalid + .validation-message{
  display: block;
  color: red;
}

What this code does:

The JS function looks for every input with the class "validateable" and iterates over them. Each element should have an attribute with an validation pattern validation-pattern="[0-9]*" Now the function checks, if the value of the input matches the pattern and add a class invalid to the input or removes it. In the css i defined an invisible div validation-message but if the element bevor this div is an validateable input field, that is invalid, the div will be displayed and you can see the validation message.

Working fidle: https://jsfiddle.net/h687eomf/

UPDATE:

in your case, you just want to validate the field, that you are changing, have a look at my changed example fidle: https://jsfiddle.net/h687eomf/2/

UPDATE 2:

尝试修复您的代码段，假设字段在其值不为空时有效，如果值为空则无效：

function validate(field) {
    const input = field;
    if (!input.value ||  input.value.length === 0) {
        input.classList.add('invalid');      
    } else {
        input.classList.remove('invalid');
    }
}

input {
    display: block;
}

.validation-message {
    display: none;
}

input.validateable.invalid + .validation-message {
    display: block;
    color: red;
}

<div class="form-group">
                                    <label class="required-field" name="matricula" for="ticketIdAppliInput">Matrícula:</label>
                                    <input onchange="validate(this)" maxlength="9" required="required" id="ticketIdAppliInput" type="text" name="matricula" onkeypress="if (isNaN(String.fromCharCode(event.keyCode))) return false;" class="form-control form-control-user validateable"/>
                                    <div class="validation-message">
                                        Verifique la información nuevamente, ingrese la matricula</div>
                                </div>
                                <div class="form-group">
                                    <label class="required-field" name="nombre" for="ticketNameAppliInput">Nombre completo:</label>
                                    <input onchange="validate(this)" maxlength="100" id="ticketNameAppliInput" type="text" name="nombre" class="form-control form-control-user validateable" />
                                    <div class="validation-message">
                                        Verifique la información nuevamente, ingrese el nombre
                                    </div>
                                </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-07-26

我来说两句

0 条评论

登录后参与评论

上一篇：如何将 spring bean 注入休眠环境 RevisionListener

TOP 榜单

文章

如何在文本字段中显示基本验证消息

如何在文本字段中显示基本验证消息

UITableView的项目向下滚动后更改颜色，然后快速备份

Linux的官方Adobe Flash存储库是否已过时？

用日期数据透视表和日期顺序查询

应用发明者仅从列表中选择一个随机项一次

Mac OS X更新后的GRUB 2问题

验证REST API参数

Java Eclipse中的错误13，如何解决？

带有错误“ where”条件的查询如何返回结果？

ggplot：对齐多个分面图-所有大小不同的分面

尝试反复更改屏幕上按钮的位置 - kotlin android studio

如何从视图一次更新多行（ASP.NET - Core）

计算数据帧中每行的NA

蓝屏死机没有修复解决方案

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

离子动态工具栏背景色

VB.net将2条特定行导出到DataGridView

通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

在Windows 7中无法删除文件（2）

python中的boto3文件上传

当我尝试下载 StanfordNLP en 模型时，出现错误

Node.js中未捕获的异常错误，发生调用