堆栈内存溢出
  繁体   English   中英

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

[英]Display an error message next to the input field if input field is blank

 原文  2017-06-06 08:50:23  4   4    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 个解决方案

解决方案1
 1  2017-06-06 08:58:54

同样在函数末尾应用return ok 

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

解决方案2
 1  2017-06-06 09:09:01

我想根据您的代码强调一些要点

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

 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; } 
 .errors { display: none; } .bdred { border-color: red } 
 <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>

解决方案3
 0  2017-06-06 09:28:56

如果您使用了jquery，则可以通过为同一模式组创建数组并使用.each来缩短代码。 

function checkform() {
    var ok = true;
    var character = [["first_name","surname","address"],["/^[A-Za-z]+$/"]];
    var city = [["city"],["/^[A-Za-z][0-9]+$/"]];
    var post = [["post_code"],["/^[0-9]+$/"]];
    var email = [["email"],["/\S+@\S+/"]];
    $("form[name='user_details'] input").each(function(){
        if($.inArray(this.id,character[0]) >= 0 ) {
            ok = showError(this,character[1]);      
        } else if(this.id == city[0]) {
            ok = showError(this,city[1]);
        } else if(this.id == post[0]) {
            ok = showError(this,post[1]);
        } else if(this.id == email[0]) {
            ok = showError(this,email[1]);
        }
    });
    return ok;
}
function showError(t,p) {
    if(t.value == "" || !p.test(t.value)){
        $(t).css("borderColor","red");
        $("#error_"+t.id).show();
        return false;
    }
    return true;
}

解决方案4
 0 已采纳  2017-06-06 09:44:18

您的代码中有几个问题，可以在许多方面进行改进，请参见下文。

  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. 您应该使用===进行字符串比较（请参阅此答案 ）
  6. 我看到您使用的是jQuery，请勿将“裸” 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 ），以免使HTML带有事件处理程序和JS具有仅从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 }); });

我创建了一个可以展示我所有观点的插件

有关更多信息，您应该在stackoverflow上查看jQuery网站和其他问题。

暂无
暂无

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

相关问题 检测输入字段中的错误信息 如果值粘贴在 type=“number” 的输入字段中，则显示错误消息 无法在 javascript 中的输入字段正下方显示错误消息 自定义 web 可访问性错误消息，当按下提交按钮上的键盘输入并且输入字段为空白时 将错误消息添加到使用JavaScript的输入字段中？ 清除输入字段焦点上的错误消息（jQuery） 获取空白输入字段的ID 如果输入字段为空，则更改焦点 Codeigniter-输入字段下方的表单错误显示 自动聚焦下一个输入字段
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM