Как определить, является ли поле формы пустым с помощью jQuery?

Question

У меня есть форма с двумя полями: имя и фамилия. Пользователь не должен заполнять поля. Когда пользователь нажимает кнопку отправки, появляется диалоговое окно jquery с данными, введенными пользователем в форму. Я только хочу показать данные для полей, которые были введены. Я пытаюсь сделать оператор if и использовать функцию length (), но она не работает. Помощь была бы отличной!

Вот мой скрипт jquery:

$(function(){
    //Initialize the validation dialog
    $('#validation_dialog').dialog({
        autoOpen: false,
        height: 600,
        width: 600,
        modal: true,
        resizable: false,
        buttons: {
            "Submit Form": function() {
                document.account.submit();
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });
    // Populate the dialog with form data
    $('form#account').submit(function(){
        $("p#dialog-data").append('<span>First Name: </span>');
        $("p#dialog-data").append('<span>');
        $("p#dialog-data").append($("input#firstname").val());
        $("p#dialog-data").append('</span><br/>');
        if (("input#lastname").val().length) > 0) {
            $("p#dialog-data").append('<span>Last Name: </span>');
            $("p#dialog-data").append('<span>');
            $("p#dialog-data").append($("input#lastname").val());
            $("p#dialog-data").append('</span><br/>');
        };
        $('#validation_dialog').dialog('open');
        return false;
    });
});

Answer 1

Просто используйте:

if ($("#firstname").val() != "") {
  // something is there
}

Во-вторых, нет смысла указывать $("input#firstname"). Просто сделай $("#firstname"). Первый излишне многословен.

Также это проблема:

$("p#dialog-data").append('<span>');
$("p#dialog-data").append($("input#firstname").val());
$("p#dialog-data").append('</span><br/>');

Вы не можете создавать искаженный HTML таким образом. Попробуйте:

$("<span>").text($("#firstname").val()).appendTo("#dialog-data");

Answer 2

Для начала ("input#lastname").val().length должно быть $("input#lastname").val().length

Кроме того, если вы собираетесь строить с помощью jQuery, вы должны знать, что каждый раз, когда вы вызываете $ с помощью селектора, вы создаете новый объект jQuery. Обычно лучше кешировать результаты вашего селектора. Ваша функция отправки, рефакторинг, может выглядит примерно так:

$('form#account').submit(function(){
        dialog_data = $("p#dialog-data");
        _data = $('<span>First Name: </span>'); //Create a DOM element.
        _data.append($("<span>").text($("input#firstname").val()));
        _data.append('<br/>');
        last_name = $("input#lastname").val();
        if (last_name.length) > 0) {
           _data.append('<span>Last Name: </span>');
           _data.append($("<span>").text(last_name)));
           _data.append('<br/>');
        };
        dialog_data.append(_data);
        $('#validation_dialog').dialog('open');
        return false;
    });

РЕДАКТИРОВАТЬ: Обновлена ​​функция для удаления дыры CSRF / XSS после просмотра ответа Клетуса и чтения этой статьи от Bobinc

Answer 3

Пожалуйста, используйте код ниже

если ($ ( "# имя"). Вал (). Дифферент () == "") предупреждение ( "Null");

у меня работает