Question

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

这是我的表单代码：

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";

Answer 1

首先这是错误的：

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

大概是您从here提出来的，并且正如注释中所指出的那样，它没有执行其声明的工作，并且会仅检查最后一个字段。

要添加消息，您可以修改验证功能以检查每个字段并插入一些文本。以下代码段应为您提供一个基本的概念-既然您是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，并且任何有意愿这样做的用户都可能轻易地使其失败或被其绕开。您发送给服务器的所有数据都需要检查，如果出现问题，应在表单页面上返回并正确处理错误。

Answer 2

当您在字段内部指定它是必填字段时，输入字段将成为必填字段。只需在星号上加上星号*或在其旁边放置必填字词即可。

这是如何在HTML5中设置必填字段

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

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

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

在空输入旁边添加*必填

2 个答案: