Проверка формы с помощью JavaScript с несколькими вариантами

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.

Позже я получу уникальные сообщения, сообщающие им «Пожалуйста, введите адрес электронной почты» или «Пожалуйста, введитеusername "но так как я не могу больше одного оператора if, я не знаю, как это будет работать.

Я не хочу использовать библиотеки js.

Answer 1

Если вы не используете библиотеку Javascript, как определяется $()?

Если это что-то похожее на библиотеку jQuery, вам нужно будет использовать $('#username') или document.getElementById('username').

Answer 2

Ваш оператор 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;
}

Answer 3

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

alert(message);
return false;