javascript - 如何从函数返回灯箱错误消息

Question

我创建了一个基本的表单验证脚本，我希望将错误消息作为灯箱返回，而不是使用alert() 消息。我喜欢 Featherlight.js 的外观，但我不知道如何从函数返回它？任何其他建议都将受到极大的重视。提前致谢。

The featherlight.js repo

function validate() {	 								
  var name = document.forms['userForm']['fname'].value;
  if (name == null || name == '') {
    alert('Please enter your first name');
	return false;
  } 
}

<label for="first-name">First Name: </label><br>
<input name="fname" type="text" /><br>
<button onclick="validate()">Submit Form</button>

Answer 1

我知道这有点晚了，但我想我知道你在追求什么。我自己刚刚做了类似的事情，所以我会把它放在这里，以防它对任何人有帮助。

我创建了一个函数，以便您可以在其他地方重复使用它，并使用“确定”按钮来关闭灯箱。

function customAlert(message = '') {
  var alertBox = $(document.createElement('div'));
  alertBox.html('<h3>'+message+'</h3><p><a class="featherlight-close">OK</a></p>');
  $.featherlight(alertBox);
}


function validate() {
  var name = document.forms['userForm']['fname'].value;
  if (name == null || name == '') {
    customAlert('Please enter your first name');
    return false;
  } 
}