Question

我正在使用此代码在用户点击进入时发送值。我想要的是如果用户点击输入而没有输入任何值，他会收到错误

<textarea class="auto-grow-input" onfocus="SK_focusChat();" onkeyup="SK_sendChatMessage(this.value,<?php echo $sk['chat']['recipient']['id']; ?>,event);"></textarea>

//发送聊天消息

function SK_sendChatMessage(text,recipient_id,e) {
    document.title = document_title;
    textarea_wrapper = $('.chat-textarea');
    chat_messages_wrapper = $('.chat-messages');

    if (e.keyCode == 13 && e.shiftKey == 0) {
        e.preventDefault();
        textarea_wrapper.find('textarea').val('');
        chat_messages_wrapper.append('<div class="chat-text align-right temp-text" align="right"><div class="text-wrapper float-right">' + text + '<div class="marker-out"><div class="marker-in"></div></div></div><div class="float-clear"></div></div>');

        $.post(SK_source() + '?t=chat&a=send_message', {text: text, recipient_id: recipient_id}, function (data) {
            chat_messages_wrapper
                .append(data.html)
                .scrollTop(chat_messages_wrapper.prop('scrollHeight'))
                .find('.temp-text')
                    .remove();
        });
    }
}

Answer 1

说真的，使用jQuery验证来检查容器。他们在验证方面做得很好。

<style>
.error { color: red; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

<script>
$(document).ready(function() {
    // validate signup form on keyup and submit
    $("#omfg").validate({
        rules: {
            omfgdood: "required"
        },
        messages: {
            omfgdood: "Oy! It\'s Empty!" 
        }
    });
});
</script>

<?php $sk['chat']['recipient']['id'] = 'omfgdood'; ?>
<form id="omfg">
    <textarea class="auto-grow-input" id="<?php echo $sk['chat']['recipient']['id']; ?>" name="<?php echo $sk['chat']['recipient']['id']; ?>"></textarea>
    <input type="submit" name="submit" value="Submit" />
</form>

Answer 2

我认为您可以像下面这样编写SK_sendChatMessage函数。

function SK_sendChatMessage(text,recipient_id,e) {
document.title = document_title;
textarea_wrapper = $('.chat-textarea');
chat_messages_wrapper = $('.chat-messages');

if (e.keyCode == 13 && e.shiftKey == 0 && text == '') {
    alert('enter text');
}
else{
  textarea_wrapper.find('textarea').val('');
    chat_messages_wrapper.append('<div class="chat-text align-right temp-text" align="right"><div class="text-wrapper float-right">' + text + '<div class="marker-out"><div class="marker-in"></div></div></div><div class="float-clear"></div></div>');

    $.post(SK_source() + '?t=chat&a=send_message', {text: text, recipient_id: recipient_id}, function (data) {
        chat_messages_wrapper
            .append(data.html)
            .scrollTop(chat_messages_wrapper.prop('scrollHeight'))
            .find('.temp-text')
                .remove();
    });
}

Answer 3

两个问题：首先，在SK_sendChatMessage函数的最顶部添加此内容。

if ($('textarea.auto-grow-input').text().length === 0) {
    alert('Must enter text');
    return false;
}

其次，您使用this.value不会向事件侦听器回调发送任何数据。由于您使用的是textarea和输入，因此没有要引用的属性值。这意味着使用textarea值验证字符长度的所有尝试都将失败。

您的代码还有其他机会。最好不要将JavaScript（或CSS）与HTML内联。

您可以附加keyup事件和聊天长度，如下所示：

$('textarea.auto-grow-input').keyup(function(e) {
    if ($(this).text().length === 0) {
        alert('Must Enter Text');
        return false;
    }

  if (e.keyCode == 13 && e.shiftKey == 0) {
      textarea_wrapper.find('textarea').val('');
      chat_messages_wrapper.append('<div class="chat-text align-right temp-text" align="right"><div class="text-wrapper float-right">' + $(this).text() + '<div class="marker-out"><div class="marker-in"></div></div></div><div class="float-clear"></div></div>');

  $.post(SK_source() + '?t=chat&a=send_message', {text: text, recipient_id: recipient_id}, function (data) {
    chat_messages_wrapper
        .append(data.html)
        .scrollTop(chat_messages_wrapper.prop('scrollHeight'))
        .find('.temp-text')
            .remove();
   });
});

表格验证onkeyup

3 个答案: