繁体   English   中英

在空输入旁边添加*必填

Adding *Required next to an empty input

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

所以我想知道如何在代码中实现必填字段。 我尝试仅在<input>标记中使用required="" ,但是,这不适用于所有浏览器。 我想知道如果用户尝试提交并且该字段为空,是否有人可以解释如何在输入旁边添加“ *必填”。

这是我的表单代码:

contact.html

<form class="contact_form" name="Form" onsubmit="return validateForm()" action="contactform.php" method="post">
    <label>Name *</label><br/>
    <input type="text" name="name" id="noName" placeholder="Full Name"><br/>
    <label>Email *</label><br/>
    <input type="text" name="email" id="a" placeholder="Email"><br/>
    <label>Subject *</label><br/>
    <input type="text" name="subject" id="b" placeholder="Subject"><br/>
    <label>Message *</label><br/>
    <textarea type="text" name="message" id="c" placeholder="Message"></textarea>
    <button type="submit" name="submit" class="submit">Submit</button>
</form> 

formvalidate.js

function validateForm()
{
    var a=document.forms["Form"]["email"].value;
    var b=document.forms["Form"]["subject"].value;
    var c=document.forms["Form"]["message"].value;
    if (a==null || a=="",b==null || b=="",c==null || c=="")
    {
        alert("Please Fill All Required Field");
        return false;
    }
}

var input = document.getElementById('a');

if(input.value.length == 0)
    input.value = "Anonymous";
2 个回复

首先这是错误的:

if (a==null || a=="",b==null || b=="",c==null || c=="")

大概是您从此处取消,并且如注释中所指出的那样,它不会执行其声明的操作, 只会检查最后一个字段

要添加消息,您可以修改验证功能以检查每个字段并插入一些文本。 以下代码段应为您提供一个基本的概念-既然您是Java语言的新手,我都在逐一注释中给出了解释。 希望这可以帮助:

 function validateForm() { // start fresh, remove all existing warnings var warnings = document.getElementsByClassName('warning'); while (warnings[0]) { warnings[0].parentNode.removeChild(warnings[0]); } // form is considered valid until we find something wrong var has_empty_field = false; // an array of required fields we want to check var fields = ['email', 'subject', 'message']; var c = fields.length; // iterate over each field for (var i = 0; i < c; i++) { // check if field value is an empty string if (document.forms["Form"][fields[i]].value == '') { // create a div with a 'warning' message and insert it after the field var inputField = document.forms["Form"][fields[i]]; var newNode = document.createElement('div'); newNode.style = "color:red; margin-bottom: 2px"; newNode.className = "warning"; newNode.innerHTML = fields[i] + ' is required!'; inputField.parentNode.insertBefore(newNode, inputField.nextSibling); // form is now invalid has_empty_field = true; } } // do the alert since form is invalid - you might be able to skip this now if (has_empty_field) { alert("Please Fill All Required Field"); return false; } } 
 <form class="contact_form" name="Form" onsubmit="return validateForm()" action="contactform.php" method="post"> <label>Name *</label><br/> <input type="text" name="name" id="noName" placeholder="Full Name"><br/> <label>Email *</label><br/> <input type="text" name="email" id="a" placeholder="Email"><br/> <label>Subject *</label><br/> <input type="text" name="subject" id="b" placeholder="Subject"><br/> <label>Message *</label><br/> <textarea type="text" name="message" id="c" placeholder="Message"></textarea> <button type="submit" name="submit" class="submit">Submit</button> </form> 

当然,您始终也需要服务器端验证! 客户端实际上仅是为了帮助获得一个快速的UIX,并且任何有意愿这样做的用户都可能轻易地使其失败或被其绕开。 您发送到服务器的所有数据都需要检查,如果出现问题,应在表单页面上返回并正确处理错误。

当您在字段内部指定它是必填字段时,输入字段将成为必填字段。 只需将星号*或紧随其后的单词放在必填项中即可。

这是在HTML5中制作必填字段的方法

Username *: <input type="text" name="usrname" required>

元素本身的“必需”属性使其成为必需。

其次,当使用HTML5验证时,您将不需要javascript验证,因为表单不会通过html5验证。 同时拥有客户端和服务器端很重要。

1 如何仅在使用javascript / jquery的其他输入不为空的情况下才添加必填属性?

我在表单中有一个列表,因此在每个列表项中都有2个输入。 我希望在提交表单时,如果我在同一列表上的2个输入之一不为空,则应同时满足它们(必需属性),但是如果在其他列表项上2个输入为空,则将其作为他们是。 这是仅一个列表项的示例: 想过类似的事情: 但是我不知道如何做到这 ...

2 在Wordress中的输入类型文本旁边添加时,自动删除空跨度类

我的wordpress标头添加搜索按钮时遇到问题。 我发现,当我在空的span类旁边添加输入类型文本时,刷新页面后,span class搜索图标将删除。 知道我该如何解决吗? 这是我的代码 我已经尝试过此功能 但是似乎问题不是来自文本编辑器,因为我尝试将输入类型“ ...

3 在用户输入的价格输入旁边添加$

我在c9.io上有一个用rails和一些haml制成的食谱网站。 在显示页面上,我想以简单的形式显示用户输入的价格,并在其旁边加上一个美元符号。 我尝试使用&lt;p&gt;标记,但是美元符号出现在另一行。 这是我的show.html.haml文件: 这是我的帖子的form.h ...

5 jQuery空字段在字段旁边添加消息

jQuery: 视图: 有没有更简单的方法可以做到这一点? 如果我两次提交但未输入任何内容,它将继续追加。 我是jquery的新手,Cant似乎找到了一种做事的简单方法,google中的所有搜索结果都将我引向了复杂的jqueries。 我如何防止该函数堆积错误消息。 ...

6 如何从Angular Material的必填字段中删除星号,并在标签旁边添加(可选)以添加可选标签

我正在为窗体字段使用angular 2材质设计。 因此,每个不需要的字段都以星号出现,这是我不想要的。此外,对于非必填字段,我希望可选文本出现在标签旁边的方括号中。 我正在使用类似下面的方法来实现它,但这是行不通的。 我的代码- 当我删除md-input的开始和结束标签并仅 ...

9 如果输入字段为空,则必填字段应更改焦点

我希望如果必填字段保留为空白,那么它将以红色焦点显示此字段必填的错误。 如果我再次清除该行并按Enter,则该字段未显示红色焦点。 $("*").filter(".required").on("change", function() { //console.log("filter cha ...

2019-03-01 12:33:07 1 35   jquery
10 如何在Razr中显示空的必填输入字段

我有一个包含一些整数的模型。 一个具有默认值,而另一个则没有。 我想用A的值4和B的空值来呈现输入字段。 看来Razr会自动将B的默认值设置为0。 该模型 控制器 创建视图 A呈现为4, B呈现为0。 我尝试过在属性中将@value = ""传递给B的编 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM