Работа с form + javascript

function addMsg() { 
  let doc = document, 
    msgName, msgDesc, msgDate, html; 
 
  if (document.getElementById('name').value) { 
    msgName = document.getElementById('name').value; 
  } else { 
    document.getElementById('name').focus(); 
    return; 
  } 
 
  if (document.getElementById('desc').value) { 
    msgDesc = document.getElementById('desc').value 
  } else { 
    document.getElementById('desc').focus(); 
    return; 
  } 
 
  msgDate = document.getElementById('date').value = new Date(); 
 
  html = '<section class="msg"><div><span>By ' + msgName + '</span><span>' + msgDate + '</span></div> <p>' + msgDesc + '</p></section>'; 
 
  if (document.getElementById('result').innerHTML += html) document.forms.myform.reset(); 
}

input, 
textarea { 
  width: 100%; 
  box-sizing: border-box; 
} 
 
section { 
  background: #e9e9e9; 
  border: 1px solid #ccc; 
  width: 320px; 
  margin: 3px; 
} 
 
p { 
  border: 1px solid #666; 
  margin: 3px; 
  padding: 5px; 
  font-size: 14px; 
} 
 
span { 
  font-size: 12px; 
  margin: 5px; 
}

<aside class="right" id="result"> 
</aside> 
<!-- form msg comm --> 
<section class="form-box"> 
  <form id="myform" action=""> 
    <input id="name" value="" placeholder="Type your nickname here..." name="login" required/> 
    <textarea id="desc" placeholder="Write your comment here..." name="msg" required></textarea> 
    <input id="date" type="hidden" /> 
    <input value="OK" type="button" onclick="addMsg()" /> 
    <!--type="submit"  по умолчанию отправляет форму, поэтому type="button"--> 
  </form> 
</section>

Очистка полей после отправки делается очень просто, пример для name:

doc.getElementById('name').value = "";

Проверку полей на заполнение можно сделать либо в скрипте

if(doc.getElementById('name').value)

Либо через сам HTML (как мы видим вы это уже сделали), и она у вас уже работает

<input id="name" value="" placeholder="Type your nickname here..." name="login" required>

Сохранение проще и красивее всего сделать через localStorage

var data = {name:msgName, desc:msgDesc,date:msgDate };
localStorage.setItem("data", JSON.stringify(data));

извлечение

var data = JSON.parse(localStorage.getItem("data"));

В дополнение к предыдущему ответу. Если нужно проверять правильно ли ввел пользователь данные в соответствующие поля, то нужны регулярные еще выражения. Реализовать можно разными способами. И HTML5 и JS.

Можно просто добавить атрибут pattern="" Имя можно написать к примеру так "^[а-яА-ЯёЁa-zA-Z]+$" Сообщение ограничить по минимальному и максимальному количеству символов ".{5,50}"

Подсказка в данном случае корявая, но есть. В ней отобразится универсальное сообщение на языке системы пользователя и то что указать в атрибуте title=""

Для красоты нужен JS. Например вот для проверки простейших форм через data-.

data-val - регулярное выражение data-val-msg - текст при неудачной валидации data-val-msg-id - Id поля куда нужно вывести сообщение при неудачной валидации

<input class="inputs" type="text" name="name" placeholder="Имя" id="name" data-val="^[а-яА-ЯёЁa-zA-Z]+$" data-val-msg="Представьтесь"
      data-val-msg-id="nameMsg">
    <span id="nameMsg"></span>
<input class="inputs" type="text" name="msg" placeholder="Write your comment here..." id="desc" data-val=".{5,50}" data-val-msg="Введите сообщение от 5 до 50 символов"
      data-val-msg-id="descMsg">
    <span id="descMsg"></span>

JS

  // регистрация события загрузки документа
if (window.addEventListener) window.addEventListener("load", init, false);
// установка обработчиков для форм и элементов форм.
function init() {
for (var i = 0; i < document.forms.length; i++) {
var form = document.forms[i];
var formValidation = false;
for (var j = 0; j < form.elements.length; j++) {
  var e = form.elements[j];
  // пропускаем все что не поле ввода.
  if (e.type != "text") {
    continue;
  }
  // проверка имеются ли атрибуты требующие проверки.
  var pattern = e.getAttribute("data-val");
  if (pattern) {
    e.onchange = validateInput; // обработчик на изменение.
    formValidation = true; // форма требует проверку.
  }
}
 if (formValidation) {
  form.onsubmit = validateForm; // установка обработчика для формы на submit
   }
 }
 }
// обработчик на изменение содержимого полей ввода.
function validateInput() {
var pattern = this.dataset.val,
  valMsg = this.dataset.valMsg,
  valMsgId = this.dataset.valMsgId,
  value = this.value;
var res = value.search(pattern);
if (res == -1) {
   document.getElementById(valMsgId).innerHTML = valMsg;
   this.className = "error";
 } else {
    document.getElementById(valMsgId).innerHTML = "";
    this.className = "valid";
 }
 }
  var flag = false;
// обработчик на submit формы.
function validateForm() {
  var invalid = false;
  for (var i = 0; i < this.elements.length; ++i) {
    var e = this.elements[i];
    if (e.type == "text" && e.onchange != null) {
      e.onchange();
      if (e.className == "error") invalid = true;
  }
}
if (invalid) {
  return false;
  } else {
    flag = true;
  }
}

function addMsg() { 
	let doc = document, 
		msgName,  
		msgDesc,  
		msgDate,  
		html; 
	if (doc.getElementById('name').value) { 
		msgName = doc.getElementById('name').value; 
	} else { 
		doc.getElementById('name').focus(); 
		return; 
	} 
	if (doc.getElementById('desc').value) { 
		msgDesc = doc.getElementById('desc').value 
	} else { 
		doc.getElementById('desc').focus(); 
		return; 
	} 
	msgDate = doc.getElementById('date').value = new Date(); 
	html = '<section class="msg"><div><span>By ' + msgName + '</span><span>' + msgDate + '</span></div> <p>' + msgDesc + '</p></section>'; 
	 
	let test = { 
		name: msgName,  
		desc: msgDesc, 
		date: msgDate  
	} 
	 
	localStorage.setItem('test', JSON.stringify(test));	 
	 
	//if (doc.getElementById('result').innerHTML += html) doc.forms.myform.reset(); 
	 
	let testMSG = JSON.parse(localStorage.getItem("test")); 
	 
	if (doc.getElementById('testMSG').innerHTML += html) doc.forms.myform.reset(); 
}

input, 
textarea { 
  width: 100%; 
  box-sizing: border-box; 
} 
 
section { 
  background: #e9e9e9; 
  border: 1px solid #ccc; 
  width: 320px; 
  margin: 3px; 
} 
 
p { 
  border: 1px solid #666; 
  margin: 3px; 
  padding: 5px; 
  font-size: 14px; 
} 
 
span { 
  font-size: 12px; 
  margin: 5px; 
}

<aside class="right" id="testMSG"> 
</aside> 
 
<!-- form msg comm --> 
<section class="form-box"> 
  <form id="myform" action=""> 
    <input id="name" value="" placeholder="Type your nickname here..." name="login" > 
    <textarea id="desc" placeholder="Write your comment here..." name="msg"></textarea> 
    <input id="date" type="hidden" /> 
    <input value="OK" type="button" onclick="addMsg()" />     
  </form> 
</section>

Подскажите где ошибка, не выводит историю из localStorage.

Заранее спасибо