Запретить ввод пустого сообщения

[laimas]

ifarame стоит от перезагрузки

form target="myIFR" означает, что ответ сервера после отправления формы будет помещен сюда iframe name="myIFR". Вы можете вообще отказаться от формы как таковой, от iframe, у вас все равно все программно.

[teplov]

Это не решит мою проблему

[teplov]

Мне нужно сделать чтоб по кнопке send не отправлялись пустые сообщения

[teplov]

вот код где они отправляются

var getMessageText, sendMessage, Message;
Message = function (arg) {
    this.text = arg.text, this.message_side = arg.message_side;
    this.draw = function (_this) {
        return function () {
            var $message;
            var json = JSON.parse(_this.text);
            alertChat();
            return createMessage(json.text, json.name, json.photo, _this.message_side);
        };
    }(this);
    return this;
};
getMessageText = function () {
    var $message_input;
    $message_input = $('.message_input');
    return $message_input.val();
};
sendMessage = function (text, message_side) {
    var $messages, message;
    if (text.trim() === '') {
        return;
    }
    $messages = $('.messages');
    message = new Message({
        text: text,
        message_side: message_side
    });
    message.draw();
    return $messages.animate({scrollTop: $messages.prop('scrollHeight')}, 300);
};

function createMessage(text, name, photo, message_side){    
    $message = $($('.message_template').clone().html());    
    if(message_side==="left"){
        $message.find('.text_wrapper').removeClass("pull-left").addClass("pull-right");
        $message.find('.text_wrapper').removeClass("alert-info").addClass("alert-warning");
        $message.find('.name').removeClass("label-info").addClass("label-warning");
        $message.find('.avatar').removeClass("pull-right").addClass("pull-left");
    }
    $message.find('.text').html(text);
    $message.find('.name').html(name);
    $message.find('.photo').attr('src', photo);
    $('.messages').append($message);
    $message.addClass('appeared');
}

а вот где кнопка не активна если в поле ввода нет сообщения

(function () {
    var Message;
    Message = function (arg) {
        this.text = arg.text, this.message_side = arg.message_side;
        this.draw = function (_this) {
            return function () {
                var $message;
                $message = $($('.message_template').clone().html());
                $message.addClass(_this.message_side).find('.text').html(_this.text);
                $('.messages').append($message);
                return setTimeout(function () {
                    return $message.addClass('appeared');
                }, 0);
            };
        }(this);
        return this;
    };
    $(function () {
        var getMessageText, message_side, sendMessage;
        message_side = 'right';
        getMessageText = function () {
            var $message_input;
            $message_input = $('.message_input');
            return $message_input.val();
        };
        sendMessage = function (text) {
            var $messages, message;
            if (text.trim() === '') {
                return;
            }
            $('.message_input').val('');
            $messages = $('.messages');
            message_side = message_side === 'left' ? 'right' : 'left';
            message = new Message({
                text: text,
                message_side: message_side
            });
            message.draw();
            return $messages.animate({ scrollTop: $messages.prop('scrollHeight') }, 300);
        };
        $('.send_message').click(function (e) {
            return sendMessage(getMessageText());
        });
        $('.message_input').keyup(function (e) {
            if (e.which === 13) {
                return sendMessage(getMessageText());
            }
        });
        sendMessage('Hello ! :)');
        
    });
}.call(this));

что мне из одного кода в другой вставить ?

[teplov]

Не пониманию что куда все перепробовал

[laimas]

Не понятно каким образом кнопка становится недоступной, если только не скрывается посредством класса, а вообще для этого достаточно менять ее свойство disabled - true/false.

Сделайте вывод в консоль в контрольных точках, то есть значения аргументов функции, что они возвращают, найдете место конфликтное.

[Malleys]

Вы можете вообще отказаться от формы как таковой

Вы предлагаете изобретать велосипед? И обрабатывать события keyup и click и может ещё какое-то, когда можно подписаться на событие submit, и вы всегда точно будете уверены, когда будет отправлена форма. (Независимо от того, каким образом она была отправлена!) Зачем бороться с тем, что упрощает?

teplov, у вас в коде никуда ничего не отправляется. Я вам уже писал, чтобы пустое сообщение не отправлялось, используйте атрибут required.

В примере показано, как происходит отправка формы при помощи функции postChatMessage. Это единственный способ отправки. В функции проверяется, что сообщение было не пустым. Затем оно может быть оправлено. Здесь на самом деле возможно много вариантов и вариант, предложенный laimas (и который я закомментировал в коде), в котором блокируется кнопка, пока отправляется сообщение, является менее дружелюбным к пользователю.

<form action="" class="chat" method="post" onsubmit="postChatMessage(event);">
	<img src="https://picsum.photos/id/129/491/325">
	<input name="message" placeholder="Add a public reply..." required autocomplete="off">
	<button>Send</button>
</form>

<script>
	
	function disableForm(form, disabled = true) {
		for(const node of document.querySelectorAll("input, select, button"))
			node.disabled = disabled;
	}

	function postChatMessage(event) {
		event.preventDefault();
		const form = event.target;
		const input = form.querySelector("input[name=message]");
		const message = input.value.trim();
		if(message === "") return;
		alert(`Будет отправлено: ${message}`);
//		disableForm(form);
//		fetch(form.action, {
//			method: form.method,
//			body: `message=${encodeURIComponent(message)}`
//		})
//			.then(response => response.json())
//			.then(data => {
//				if(data.ok) {
//					// только когда действительно сообщение было отправлено,
//					// только тогда очищаем поле ввода
//					input.value = "";
//				} else {
//					throw new Error("Ошибка обработки сообщения на сервере");
//				}
//			})
//			.catch(error => {
//				// произошла ошибка, поле не очищаем
//				// можно вывести диалог, что сообщение не было отправлено
//			})
//			.then(() => disableForm(form, false))
//		;
	}

</script>

<style>
	@import url('https://fonts.googleapis.com/css?family=Material+Icons');
	
	html {
		background: gainsboro;
	}
	
	body {
		margin: 0;
	}

	.chat {
		background: white;
		display: flex;
		align-items: center;
		padding: 10px;
		transition: 300ms;
	}
	
	.chat:focus-within {
		box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
	}
	
	.chat img {
		width: 50px;
		height: 50px;
		object-fit: cover;
		border-radius: 50%;
		margin-right: -55px;
		margin-left: 5px;
		z-index: 1;
		transition: 300ms;
		transform: scale(0.8);
	}
	
	.chat:not(:focus-within) img {
		transform: scale(0.6);
	}
	
	.chat input[name="message"] {
		flex: 1;
		padding: 0px 60px;
		height: 60px;
		border: 0;
		border-radius: 3px;
		box-shadow: 0;
		outline: none;
		transition: 300ms;
	}
	
	.chat:focus-within input[name="message"] {
		box-shadow: 0 3px 8px -2px;
	}
	
	.chat button {
		border: 0;
		background: none;
		width: 50px;
		height: 50px;
		margin-left: -55px;
		margin-right: 5px;
		display: none;
		text-transform: lowercase;
		font: 2em "Material Icons";
		color: #2196F3;
	}
	
	.chat input[name="message"]:valid ~ button {
		display: block;
	}
	
</style>

Вы можете эту идею взять за основу. А насчёт отправки, то не нужно ничего блокировать, как это предлагает laimas, достаточно сразу опубликовать сообщение в чате (а значит его нужно удалить из поля ввода), и уже в дальнейшем на самом сообщении будет указываться статус («Отправка...», «Доставлено», «Прочитано», «Не удалось отправить»), и, например, в случае, когда не удалось отправить сообщение, поскольку у вас была отключена сеть, на самом сообщении будет указан статус («Не удалось отправить»), и предоставлена на сообщении кнопка «Отправить заново».

[laimas]

Вы предлагаете изобретать велосипед?

Мопед. У него в форме оно поле, но при этом серверу шлется json с двумя свойствами. Нахрена она вообще нужна отправка формы как таковая? Впрочем мне все равно, я не заставляю его ничего менять.

А насчёт отправки, то не нужно ничего блокировать, как это предлагает laimas

Блокируют повторную отправку форму, что не является редкостью со стороны клиента, и причина этой несдержанности клиента понятна. А "дружелюбность" и прочее, это словоблудие в данном случае.

[Malleys]

Блокируют повторную отправку форму

А зачем её блокировать? Достаточно поместить сообщение в чат и очистить поле ввода! (А пустое поле не отправляется, см. пост выше)

Нахрена она вообще нужна отправка формы как таковая?

Вы сами себе противоречите: форму нужно отправить, но притом вы говорите, что её не нужно отправлять... Форма для этого и существует, чтобы её отправлять... не говоря уже о том богатом функционале, который она предоставляет, что бы данные формы соответствовали определённому формату, и состояния, которые, имеются у элементов формы.

"дружелюбность" и прочее, это словоблудие в данном случае.

Это очень важная тема на самом деле... Человек написал сообщение и оно по вашему методу исчезно в никуда... Разве такое позволительно в настоящих приложениях? Ну если возможно, то его будут избегать в пользу приложении, где всё-таки ввод пользователя священен, например, в Viber и пр.

[laimas]

А зачем её блокировать? Достаточно поместить сообщение в чат и очистить поле ввода!

Офигеть. Вы вообще занимались практически полным приложением сервер<->клиент или только стороной клиента занимались? А коли была практика, то должны знать о проблема повторной отправки формы, примеры такого бардака, кстати, встречаются не раз и на страницах данного форума.

Если на это наплевать и заняться только "красивой стороной" вопроса, то грош цена всей вашей красоте. А вообще же активную/неактивную кнопку можно разукрасить как угодно, для этого есть :enabled/:disabled.