Javascript 错误或成功提交表单时的警报消息

所以我在这个表单上尝试应用简单的表单验证，一切都正常，除了如果用户离开空字段或表单已成功提交，我想显示一条警告消息。 但问题是我的表格下面有一条紫色的线，我想在提交表格之前隐藏它

/*简单表单验证脚本*/
var formData=document.forms.myForm；
var show=document.getElementById（“警报”）；
formData.onsubmit=函数（）{
如果（formData.name.value==“”）{
show.innerHTML=“请填写所有字段！”；
返回false；
}否则{
$（“#警报”）.css（“显示”、“块”）；
show.innerHTML=“成功提交表单！”；
返回true；
}
};
#警报{
保证金：30像素自动；
背景：紫色；
颜色：#fff；
边框：1px实心透明；
填充：0px 20px；
宽度：30%；
字体大小：20px；
边界半径：2px；
-webkit过渡：背景2轻松；
-moz转换：背景2秒；
-ms转换：背景2s；
-o-过渡：背景；
过渡：背景轻松；
}

姓名：
密码：
此代码的问题是，您通常提交的是，，这意味着页面被导航到另一个页面，您可以在那里看到帖子结果。在这里，新页面被加载，所有旧JavaScript被丢弃

要使用CSS显示
#警报
，您需要在同一页面中，因此使用AJAX是最好的方法。这就是为什么当它导航到新页面时，甚至在JavaScript执行之前，您都看不到输出

此外，在顶部添加以下代码将有助于在显示警报框之前隐藏警报框（现在显示为细线）：

$("#alert").hide();

注意：为什么要混淆jQuery和JavaScript。使用一个，它更容易

更新：隐藏紫色细线代码：


/*简单表单验证脚本*/
$（函数（）{
$（“#警报”）.hide（）；
$（“表格”）。提交（函数（）{
如果（this.name.value==“”）{
$（“#警报”）.text（“请填写所有字段！”）.show（）；
}否则{
$（“#警报”）.text（“成功提交表单！”）.show（）；
$.post（$（this.attr（“操作”），$（this.serialize（），函数（）{
$（“#警报”）.text（“成功提交表单！”）.show（）；
});
}
返回false；
});
});
#警报{
保证金：30像素自动；
背景：紫色；
颜色：#fff；
边框：1px实心透明；
填充：0px 20px；
宽度：30%；
字体大小：20px；
边界半径：2px；
-webkit过渡：背景2轻松；
-moz转换：背景2秒；
-ms转换：背景2s；
-o-过渡：背景；
过渡：背景轻松；
}

姓名：
密码：
将#警报设置为显示：无；默认情况下

    #alert {
      display:none;
    }

JS:

您可以尝试使用js中的.css属性指定边框，如下所示：

$("#alert").css('border','1px solid transparent');

您可以尝试下面的代码。我已经测试过了，它正在工作。


#警觉的{
保证金：30像素自动；
背景：紫色；
颜色：#fff；
填充：0px 20px；
宽度：30%；
字体大小：20px；
边界半径：2px；
-webkit过渡：背景2轻松；
-moz转换：背景2秒；
-ms转换：背景2s；
-o-过渡：背景；
过渡：背景轻松；
}


姓名：
密码：


/*简单表单验证脚本*/
$（函数（）{
$（“#警报”）.hide（）；
$（“表格”）。提交（函数（）{
如果（this.name.value==“”）{
$（“#警报”）.text（“请填写所有字段！”）.show（）；
}否则{
$（“#警报”）.text（“成功提交表单！”）.show（）；
$.post（$（this.attr（“操作”），$（this.serialize（），函数（）{
$（“#警报”）.text（“成功提交表单！”）.show（）；
});
}
返回false；
});
});

$（“#警报”）.css（'border'，'1px solid transparent'）；
为什么要将jQuery和JavaScript混为一谈。使用一个，更简单。将
#alert
设置为
显示：无
by defaultsubmitting表单重新加载页面。据我所知，当表单首次加载时，您希望隐藏警报div…因此您必须将其显示属性default设置为hide（display:none），这应该可以解决问题…在验证中，在这两种情况下都显示它..在您的情况下，您可以使用preventDefault（）为了避免默认的表单提交行为，当您在表单提交成功时将表单提交给自己，它会导致表单重新加载，结果是您没有收到成功消息。是的，感谢您的澄清，但我想在显示之前隐藏紫色细线@PraveenKumar@AishaSalman是的，您需要使用
$（“#警报”）.hide（）在顶部。是的，我已将其设置为顶部，但在这里不起作用@PraveenKumar@AishaSalman我首先解释了使用AJAX代码的原因。@AishaSalman您需要使用AJAX来显示消息buddy。那么，您需要显示AJAX的代码吗？
Try removing border attribute from this code:

  #alert {
  margin: 30px auto;
  background: purple;
  color: #fff;
  border: 1px solid transparent;
  padding: 0px 20px;
  width: 30%;
  font-size: 20px;
  border-radius: 2px;
  -webkit-transition: background 2s ease;
  -moz-transition: background 2s ease;
  -ms-transition: background 2s ease;
  -o-transition: background 2s ease;
  transition: background 2s ease;
}

$("#alert").css('border','1px solid transparent');