Question

我无法确保我的表单已完全填写。

这是html：

<div id="username_input">
    <span>User name:</span> <input id="username" onclick="changeBackground('#ffffff', this.id)" type="text" name="firstname" />
    <small id="username_error_message">please input username</small>
</div><!-- End of div id username_input -->

<div id="email_input">
    <span>Email:</span> <input id="email" onclick="changeBackground('#ffffff', this.id)" type="text" name="email" />
    <small id="email_error_message">please input email</small>
</div><!-- End of div id email_input -->

<div id="textarea">
    <textarea id="textarea_body" onclick="clearTextarea()" rows="5" cols="120"></textarea>
</div><!-- End of div id textarea -->

<div id="submit_button">
    <input id="button" type="submit" name="Submit" value="Post Comment" />
</div><!-- End of div id button -->

我所要做的就是确保用户不留空输入。

以下是我遇到问题之前的所有内容：

function inputCheck() {
        /*  This is to check if the values, username - email 
            and text area body, in the input form are filled in */
        if($('username').value.length == 0 || $('email').value.length == 0 || $('textarea_body').value.length == 0) {
            if($('username').value.length == 0) {
                alert("Invalid username");
                return false;
            } else if ($('email').value.length == 0) {
                alert("Invalid email");
                return false;
            } else {
                alert("Invalid post");
                return false;
            }

        } else {
            return true;
        }

我希望所有三个警报框一次显示出来。我遇到的问题是它查看了第一个if语句，然后突破了JavaScript代码。

我稍后会有独特的消息告诉他们“请输入电子邮件”或“请输入用户名”，但因为我不能多于一个if语句我不知道这是怎么回事。

我不想使用js库。

Answer 1

如果您没有使用Javascript库，$()定义为什么？

如果它与jQuery库类似，那么您需要使用$('#username')或document.getElementById('username')。

Answer 2

var message = "";
if ( !$('username').value ) {
    message += "Invalid username. ";
}
if ( !$('email').value ) {
    message += "Invalid email. ";
}
if ( message === "" ) {
    message = "Invalid post.";
}

alert(message);
return false;

Answer 3

每次提醒后你的return false;语句将退出你的inputCheck()函数并返回我猜的是Form Post事件的调用者，返回false会阻止提交。发现第一个错误后会发生这种情况。

对于用户获取多个警报框，他们必须确认表单验证不是一个很好的用户体验。考虑使用表单中的所有错误构建一个字符串，并在一个警报中显示它们。

function inputCheck() {
    var errMsg = '';

    if($('username').value.length == 0) errMsg += 'Enter a valid username.\n';
    if($('email').value.length == 0) errMsg += 'Enter a valid email address.\n';
    if($('textarea_body').value.length == 0) errMsg += 'Enter an email body.\n';

    if(errMsg.length > 0) {
        alert('Please correct the following:\n' + errMsg);
        return false;
    }

    return true;
}

使用包含多个版本的JavaScript验证表单

3 个答案: