所以我想知道如何在代码中实现必填字段。 我尝试仅在<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";

#1楼 票数:0

首先这是错误的:

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,并且任何有意愿这样做的用户都可能轻易地使其失败或被其绕开。 您发送到服务器的所有数据都需要检查,如果出现问题,应在表单页面上返回并正确处理错误。

#2楼 票数:-1

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

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

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

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

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

  ask by terryjtowell translate from so

未解决问题?本站智能推荐:

2回复

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

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

如果输入字段为空,则在输入字段旁边显示错误消息

我是JavaScript新手,有点卡住了... 我有一个表单,正在尝试在空白或不包含正确信息的输入字段旁边生成错误消息。 不幸的是什么也没做...谢谢您的帮助! 我的HTML: 我的JavaScript: } 我的CSS:
2回复

jQuery在输入元素旁边添加一个元素

我有这个HTML输入。 我正在尝试在输入字段旁边添加somr元素。 我尝试了append()和prepend()但是它出错了。 这是我的代码: 这可能吗? 我理想的输出是这样的
4回复

如何在输入字段中添加红色边框和必填属性?

当前,如果具有required属性的输入字段为空,它将显示浏览器的默认错误消息。 如果删除此属性,由于我的JavaScript代码,它将在输入字段上显示红色边框。 如何同时显示两者? $("form").submit(function(e) { e.preventDefault();
1回复

在我的表单输入旁边添加一个具有动态大小的标签

经过几次试验后,我设法创建了看起来很漂亮(或我认为如此)的这些形式的文本区域。 我认为,下一步是在描述输入的每个标签旁边添加一个标签。 我想要的是使标签看起来像输入一样(可能使用粗体或其他颜色),但要动态占用空间。 因此,如果标签的内容较大,则它将推送其旁边的输入,以适应标签本身。
3回复

输入,水平表单样式旁边的添加按钮-Bootstrap

我试图在输入旁边添加一个删除按钮。 我当前的代码: 生成的输出: 红色按钮不在最后一个输入的右侧。
3回复

如何在React中点击按钮以红色边框突出显示空的必填(*)输入字段?

在下面的图像截图中,我将字段设为必填项,因此单击注册按钮 如果有任何字段,那么我想在 React 中用红色边框突出显示该空字段,这怎么可能? ( https://blueprintjs.com/docs/#core/components/text-inputs )
1回复

淘汰赛:如果字段已填写,如何使输入为必填字段,而当字段为空时则不要求

我想做一个密码更改表格。 它应该随时显示在设置页面上,并且不需要填写。 但是,如果至少填充了三个字段(旧通行证,新通行证,确认)之一,则还需要其他字段。 我能做到吗? 这是我的临时代码