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

时间：2017-06-06 08:50:24

标签： javascript jquery html

我是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;
}

4 个答案:

答案 0 :(得分：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;

答案 1 :(得分：1)

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

  1. 错误是因为您没有在代码中包含jquery版本。
  2. 如果您使用的是jquery，请使用它来缩短代码。
  3. 不要在id中为每个CSS重复相同的属性，而是使用class。
  4. 使用||
    5. 在单一条件下检查空和正则表达式

    ＆＃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;

答案 2 :(得分：0)

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

来缩短代码 
.each

答案 3 :(得分：0)

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

  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. 删除它

  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
    });
});

    9. 我创建了plunker that demonstrates all of my points

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

相关问题
最新问题