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

Question

我是JavaScript的新手，有点卡住了......

我有一个表单，我正在尝试在空白或不包含正确信息的输入字段旁边生成错误消息。

不幸的是，没有做任何事...... 谢谢你的帮助!!

我的HTML：

<form name="user_details" method="post" onsubmit="return checkform()">
    <table id="form_table">
        <tr>
            <td class="form_cell"><label for="first_name">First Name:</label></td> 
            <td class="form_cell"><input type="text" id="first_name">*</td>
            <td id="error_first_name">The first name field needs to contain at least one character.</td>
        </tr>
        <tr>
            <td class="form_cell"><label for="surname">Surname:</label></td>
            <td class="form_cell"><input type="text" id="surname">*</td>
            <td id="error_surname">The surname field needs to contain at least one character.</td>
        </tr>
        <tr>
            <td class="form_cell"><label for="address">Address:</label></td>
            <td class="form_cell"><input type="text" id="address">*</td>
            <td id="error_address">The address field needs to contain at least one character.</td>
        </tr>
        <tr>
            <td class="form_cell"><label for="city">City:</label></td>
            <td class="form_cell"><input type="text" id="city">*</td>
            <td id="error_city">The city field needs to contain at least one character.</td>
        </tr>
        <tr>
            <td class="form_cell"><label for="post_code">Post Code:</label></td>
            <td class="form_cell"><input type="text" id="post_code">*</td>
            <td id="error_post_code">The post code field needs to contain a number.</td>
        </tr>
        <tr>
            <td class="form_cell"><label for="email">Email:</label></td>
            <td class="form_cell"><input type="email" id="email">*</td>
            <td id="error_email">The email field needs to contain an email address.</td>
        </tr>
        <tr>
            <td class="form_cell"><label for="phone_number">Phone Number:</label></td>
            <td class="form_cell"><input type="text" id="phone_number"></td>
        </tr>
    </table>
        <input type="submit"><input type=reset>
    </form>

我的JavaScript：

function checkform() {
var ok = true,
    first_name,
    surname,
    address,
    city,
    post_code,
    email;

if (document.getElementById("first_name").value == "") {
    document.getElementById("first_name").style.borderColor = "red";
    $("#error_first_name").show();
    ok = false;
}

else if (document.getElementById("surname").value == "") {
    document.getElementById("surname").style.borderColor = "red";
    $("#error_surname").show();
    ok = false;
}

else if (document.getElementById("address").value == "") {
    document.getElementById("address").style.borderColor = "red";
    $("#error_address").show();
    ok = false;
}

else if (document.getElementById("city").value == "") {
    document.getElementById("city").style.borderColor = "red";
    $("#error_city").show();
    ok = false;
}

else if (document.getElementById("post_code").value == "") {
    document.getElementById("post_code").style.borderColor = "red";
    $("#error_post_code").show();
    ok = false;
}

else if (document.getElementById("email").value == "") {
    document.getElementById("email").style.borderColor = "red";
    $("#error_email").show();
    ok = false;
}

else if (!/^[A-Za-z]+$/.test(document.getElementById("first_name").value)) {
    document.getElementById("first_name").style.borderColor = "red";
    ok = false;
} 

else if (!/^[A-Za-z]+$/.test(document.getElementById("surname").value)) {
    document.getElementById("surname").style.borderColor = "red";
    ok = false;
} 

else if (!/^[A-Za-z]+$/.test(document.getElementById("address").value)) {
    document.getElementById("address").style.borderColor = "red";
    ok = false;
} 

else if (!/^[A-Za-z][0-9]+$/.test(document.getElementById("city").value)) {
    document.getElementById("city").style.borderColor = "red";
    ok = false;
} 

else if (!/^[0-9]+$/.test(document.getElementById("post_code").value)) {
    document.getElementById("post_code").style.borderColor = "red";
    ok = false;
}

else if (!/\S+@\S+/.test(document.getElementById("email").value)) {
    document.getElementById("first_name").style.borderColor = "red";
    ok = false;
} 


else {
    return ok;
}

}

我的CSS：

#error_first_name {
display: none;
}

#error_surname {
display: none;
}

#error_address {
display: none;
}

#error_city {
display: none;
}

#error_post_code {
display: none;
}

#error_email {
display: none;
}

Answer 1

在功能结尾处应用return ok

＆＃13;

＆＃13;

function checkform() {
  var ok = true,
    first_name,
    surname,
    address,
    city,
    post_code,
    email;

  if (document.getElementById("first_name").value == "") {
    document.getElementById("first_name").style.borderColor = "red";
    $("#error_first_name").show();
    ok = false;
  } else if (document.getElementById("surname").value == "") {
    document.getElementById("surname").style.borderColor = "red";
    $("#error_surname").show();
    ok = false;
  } else if (document.getElementById("address").value == "") {
    document.getElementById("address").style.borderColor = "red";
    $("#error_address").show();
    ok = false;
  } else if (document.getElementById("city").value == "") {
    document.getElementById("city").style.borderColor = "red";
    $("#error_city").show();
    ok = false;
  } else if (document.getElementById("post_code").value == "") {
    document.getElementById("post_code").style.borderColor = "red";
    $("#error_post_code").show();
    ok = false;
  } else if (document.getElementById("email").value == "") {
    document.getElementById("email").style.borderColor = "red";
    $("#error_email").show();
    ok = false;
  } else if (!/^[A-Za-z]+$/.test(document.getElementById("first_name").value)) {
    document.getElementById("first_name").style.borderColor = "red";
    ok = false;
  } else if (!/^[A-Za-z]+$/.test(document.getElementById("surname").value)) {
    document.getElementById("surname").style.borderColor = "red";
    ok = false;
  } else if (!/^[A-Za-z]+$/.test(document.getElementById("address").value)) {
    document.getElementById("address").style.borderColor = "red";
    ok = false;
  } else if (!/^[A-Za-z][0-9]+$/.test(document.getElementById("city").value)) {
    document.getElementById("city").style.borderColor = "red";
    ok = false;
  } else if (!/^[0-9]+$/.test(document.getElementById("post_code").value)) {
    document.getElementById("post_code").style.borderColor = "red";
    ok = false;
  } else if (!/\S+@\S+/.test(document.getElementById("email").value)) {
    document.getElementById("first_name").style.borderColor = "red";
    ok = false;
  } else {
    return ok;
  }
   return ok;
}

＆＃13;

#error_first_name {
  display: none;
}

#error_surname {
  display: none;
}

#error_address {
  display: none;
}

#error_city {
  display: none;
}

#error_post_code {
  display: none;
}

#error_email {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="user_details" method="post" onsubmit="return checkform()">
  <table id="form_table">
    <tr>
      <td class="form_cell"><label for="first_name">First Name:</label></td>
      <td class="form_cell"><input type="text" id="first_name">*</td>
      <td id="error_first_name">The first name field needs to contain at least one character.</td>
    </tr>
    <tr>
      <td class="form_cell"><label for="surname">Surname:</label></td>
      <td class="form_cell"><input type="text" id="surname">*</td>
      <td id="error_surname">The surname field needs to contain at least one character.</td>
    </tr>
    <tr>
      <td class="form_cell"><label for="address">Address:</label></td>
      <td class="form_cell"><input type="text" id="address">*</td>
      <td id="error_address">The address field needs to contain at least one character.</td>
    </tr>
    <tr>
      <td class="form_cell"><label for="city">City:</label></td>
      <td class="form_cell"><input type="text" id="city">*</td>
      <td id="error_city">The city field needs to contain at least one character.</td>
    </tr>
    <tr>
      <td class="form_cell"><label for="post_code">Post Code:</label></td>
      <td class="form_cell"><input type="text" id="post_code">*</td>
      <td id="error_post_code">The post code field needs to contain a number.</td>
    </tr>
    <tr>
      <td class="form_cell"><label for="email">Email:</label></td>
      <td class="form_cell"><input type="email" id="email">*</td>
      <td id="error_email">The email field needs to contain an email address.</td>
    </tr>
    <tr>
      <td class="form_cell"><label for="phone_number">Phone Number:</label></td>
      <td class="form_cell"><input type="text" id="phone_number"></td>
    </tr>
  </table>
  <input type="submit"><input type=reset>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我想根据您的代码突出显示一些要点

1. 错误是因为您没有在代码中包含jquery版本。
2. 如果您使用的是jquery，请使用它来缩短代码。
3. 不要在id中为每个CSS重复相同的属性，而是使用class。
4. 使用||
在单一条件下检查空和正则表达式
＆＃13;
＆＃13;
function checkform() {
  var ok = true,
    first_name = $.trim($("#first_name").val()),
    surname = $.trim($("#surname").val()),
    address = $.trim($("#first_name").val()),
    city = $.trim($("#city").val()),
    post_code = $.trim($("#post_code").val()),
    email = $.trim($("#email").val());
  $('input.bdred').removeClass('bdred');
  $('.errors').hide();
  if (!first_name || !/^[A-Za-z]+$/.test(first_name)) {
    $("#first_name").addClass('bdred');
    $("#error_first_name").show();
    ok = false;
  } else if (!surname || !/^[A-Za-z]+$/.test(surname)) {
    $("#surname").addClass('bdred');
    $("#error_surname").show();
    ok = false;
  } else if (!address || !/^[A-Za-z]+$/.test(address)) {
    $("#address").addClass('bdred');
    $("#error_address").show();
    ok = false;
  } else if (!city || !/^[A-Za-z][0-9]+$/.test(city)) {
    $("#city").addClass('bdred');
    $("#error_city").show();
    ok = false;
  } else if (!post_code || !/^[0-9]+$/.test(post_code)) {
    $("#post_code").addClass('bdred');
    $("#error_post_code").show();
    ok = false;
  } else if (!email || !/\S+@\S+/.test(email)) {
    $("#email").addClass('bdred');
    $("#error_email").show();
    ok = false;
  }
  return ok;
}
＆＃13;
.errors {
  display: none;
}

.bdred {
  border-color: red
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="user_details" method="post" onsubmit="return  checkform();">
  <table id="form_table">
    <tr>
      <td class="form_cell"><label for="first_name">First Name:</label></td>
      <td class="form_cell"><input type="text" id="first_name">*</td>
      <td id="error_first_name" class="errors">The first name field needs to contain at least one character.</td>
    </tr>
    <tr>
      <td class="form_cell"><label for="surname">Surname:</label></td>
      <td class="form_cell"><input type="text" id="surname">*</td>
      <td id="error_surname" class="errors">The surname field needs to contain at least one character.</td>
    </tr>
    <tr>
      <td class="form_cell"><label for="address">Address:</label></td>
      <td class="form_cell"><input type="text" id="address">*</td>
      <td id="error_address" class="errors">The address field needs to contain at least one character.</td>
    </tr>
    <tr>
      <td class="form_cell"><label for="city">City:</label></td>
      <td class="form_cell"><input type="text" id="city">*</td>
      <td id="error_city" class="errors">The city field needs to contain at least one character.</td>
    </tr>
    <tr>
      <td class="form_cell"><label for="post_code">Post Code:</label></td>
      <td class="form_cell"><input type="text" id="post_code">*</td>
      <td id="error_post_code" class="errors">The post code field needs to contain a number.</td>
    </tr>
    <tr>
      <td class="form_cell"><label for="email">Email:</label></td>
      <td class="form_cell"><input type="email" id="email">*</td>
      <td id="error_email" class="errors">The email field needs to contain an email address.</td>
    </tr>
    <tr>
      <td class="form_cell"><label for="phone_number">Phone Number:</label></td>
      <td class="form_cell"><input type="text" id="phone_number"></td>
    </tr>
  </table>
  <input type="submit"><input type=reset>
</form>
＆＃13;
＆＃13;
＆＃13;

Answer 3

如果您使用了jquery，则可以通过为同一模式组创建数组并使用doctrine: orm: auto_mapping: true

来缩短代码

.each

Answer 4

您的代码中存在多个问题，您可以通过多种因素对其进行改进，请参阅下文。

1. 你没有正确关闭功能checkform()，你错过了一个结束括号。

2. 你想从函数return ok无论如何，所以你应该省略else块，例如：

   function checkform() {
       var ok = true,
       [ omitted for brevity ]
       else if (!/\S+@\S+/.test(document.getElementById("email").value)) {
           document.getElementById("first_name").style.borderColor = "red";
           ok = false;
       } 
   
       return ok;
   }
   

3. 您可能想要检查表单提交中的所有错误。目前您的代码所做的是在每个字段中查找错误，当遇到错误时，它将显示错误消息并停止查找其他错误。要更改它，您应该放弃else if而只支持if系列，如下所示：

   function checkform() {
       var ok = true,
       [ omitted for brevity ]
   
       if (document.getElementById("first_name").value == "") {
           document.getElementById("first_name").style.borderColor = "red";
           $("#error_first_name").show();
           ok = false;
       } // See here - it will check each field no matter what
       if (document.getElementById("surname").value == "") {
           document.getElementById("surname").style.borderColor = "red";
           $("#error_surname").show();
           ok = false;
       }
       return ok;
   }
   

4. 如果错误消失，您不会重置字段样式。例如 - 用户尝试提交空表单，因此所有字段都会发出错误信号。然后用户只填写第一个名称并提交，但仍然显示错误，因为您从未重置它。您可以为每张支票添加else并采取相应措施。

5. 您应该使用===进行字符串比较（请参阅this answer）
6. 我看到你正在使用jQuery，你不应该混合＆＃34;裸＆＃34; js（和document.getElementById一样使用jQuery代码，因为它会使代码变得混乱。使用jQuery，您可以获得如下字段的值：$('<css selector here>').val()，例如$('#first_name').val()，您可以更改样式，通过$('<css selector>').css('<property', '<value>')
7. 您不应混合演示文稿和代码（如设置样式），而是添加和删除css类并在样式表中设置样式。您可以使用jQuery添加类，如下所示：$('<css selector').addClass('<you class name')并按类似$('<css selector').removeClass('<you class name')
删除它

8. 您应该在脚本文件中附加事件处理程序（如onsubmit），这样您就不会使用事件处理程序和JS混淆HTML，而是使用HTML调用许多函数。这提高了代码的可读性。您可以在jQuery中附加事件处理程序，如下所示：

   $(function() { // This wait's for document.ready.
       // It's required to attach event in script
       // because scripts are ran before browser parses HTML
       $('#formId').submit(function() {
           return false; // This gets called on form submit
       });
   });
   

我创建了plunker that demonstrates all of my points

有关详细信息，您应该在stackoverflow上看到jQuery website和其他问题。