jquery - 如果满足验证条件，则单击按钮后运行主聊天代码

Question

在用户单击 sendMessage 按钮后，如何使主聊天代码仅在通过验证（即字段不包含默认值或为空）时运行？

现在无论验证是否通过，主聊天代码都会运行。

// main chat code

$(function () {

    var IWannaChat = $.connection.myChatHub;

    IWannaChat.client.addMessage = function (message) {
        $('#listMessages').append('<li>' + message + '</li>');
    };

    $("#sendMessage").click(function () {
        IWannaChat.server.send($('#ideaBody').val());
    });

    $.connection.hub.start();
});

// handling default values and validation

$(function () {
    $('#ideaTitle, #ideaBody').each(function () {
        $.data(this, 'default', this.value);
    }).focus(function () {
        if (!$.data(this, 'edited')) {
            this.value = "";
        }
    }).change(function () {
        $.data(this, 'edited', this.value != "");
    }).blur(function () {
        if (!$.data(this, 'edited')) {
            this.value = $.data(this, 'default');
        }
    });
    $('#sendMessage').click(function () {
        $('#ideaTitle,#ideaBody').each(function () {
            if ($.trim($(this).val()).length === 0) {
                alert('empty');
                return false;
            }
            if ($.trim($(this).val()) === $(this).data('default')) {
                alert('default');
                return false;
            }
        })
    });
});

Answer 1

您可以尝试只使用一个 $("#sendMessage").click

// main chat code

$(function () {

var IWannaChat = $.connection.myChatHub;

IWannaChat.client.addMessage = function (message) {
    $('#listMessages').append('<li>' + message + '</li>');
};

$("#sendMessage").click(function () {
        if ($.trim($("#ideaBody").val()).length === 0) {
            alert('empty');
            return false;
        }
        if ($.trim($("#ideaBody").val()) === $("#ideaBody").data('default')) {
            alert('default');
            return false;
        }
        else{
            IWannaChat.server.send($('#ideaBody').val());
        }        
});

$.connection.hub.start();
});

// handling default values and validation

$(function () {
$('#ideaTitle, #ideaBody').each(function () {
    $.data(this, 'default', this.value);
}).focus(function () {
    if (!$.data(this, 'edited')) {
        this.value = "";
    }
}).change(function () {
    $.data(this, 'edited', this.value != "");
}).blur(function () {
    if (!$.data(this, 'edited')) {
        this.value = $.data(this, 'default');
    }
});
});