使用JavaScript验证表单并将其显示在页面而不是警报框上

我已经创建了一个表单，需要使用JavaScript或Jquery进行验证。如何验证下拉列表是否具有值“Title”，以及文本框是否为空，并将其显示在页面上，而不是显示在警告框上：

       <form action="" method="post" accept-charset="UTF-8" name="myForm">
       <option value="Title" id="title_3-0"  disabled selected>Title</option><option  value="Mr" id="title_3-1">Mr</option>
 <option value="Mrs" id="title_3-2">Mrs</option><option value="Miss" id="title_3- 3">Miss</option>
 <option value="Ms" id="title_3-4">Ms</option><option value="Dr" id="title_3-5">Dr</option>
 <option value="Professor" id="title_3-6">Professor</option></select></div></div>

铁匠
MrsMiss
MsDr
教授

文本框：

    <input type="text" class="text" name="firstname_4" id="amf-input-firstname_4" value="" placeholder="First Name">

---

我还有一个按钮。

因为您是新来的，请查找这些链接并阅读。它会引导你度过难关。这比我们给你所有的密码要好。因为这种表单验证很重要，所以最好从头开始学习

以下是一个开始：

<script>
function validateForm()
{
  var return_value = true;
  var x=document.forms["myForm"]["firstname_4"].value;
  if (x==null || x=="")
  {
    document.getElementById("error").innerHTML += "First name must be filled out<br />";
    return_value = false;
  }
  var y=document.forms["myForm"]["selectid"];
  if(y.options[y.selectedIndex].value == "Title")
  {
    document.getElementById("error").innerHTML += "You need to select a title<br />";
    return_value = false;
  }
  return return_value;
}
</script>


<span id="error"></span>
<form name="myForm" onsubmit="return validateForm()" method="post">
First name: <input type="text" class="text" name="firstname_4" id="amf-input-firstname_4" value="" placeholder="First Name">
<input type="submit" value="Submit">
</form>

函数validateForm（）
{
var返回值=真；
var x=document.forms[“myForm”][“firstname_4”].value；
如果（x==null | | x==“”）
{
document.getElementById（“错误”）.innerHTML+=“必须填写名字
”；
返回值=false；
}
var y=document.forms[“myForm”][“selectid”]；
if（y.options[y.selectedIndex].value==“Title”）
{
document.getElementById（“错误”）.innerHTML+=“您需要选择一个标题
”；
返回值=false；
}
返回_值；
}
名字：

如果愿意，还可以在每个字段的上方/下方放置一个“错误范围元素”，并单独设置每个错误：

<script>
function validateForm()
{
  var return_value = true;
  var x=document.forms["myForm"]["firstname_4"].value;
  if (x==null || x=="")
  {
    document.getElementById("error1").innerHTML = "First name must be filled out";
    return_value = false;
  }
  var y=document.forms["myForm"]["selectid"];
  if(y.options[y.selectedIndex].value == "Title")
  {
    document.getElementById("error2").innerHTML = "You need to select a title";
    return_value = false;
  }
  return return_value;
}
</script>


<form name="myForm" onsubmit="return validateForm()" method="post">

First name: <input type="text" class="text" name="firstname_4" id="amf-input-firstname_4" value="" placeholder="First Name">
<span id="error1"></span>

Title: <input .... >
<span id="error2"></span>

<input type="submit" value="Submit">
</form>

函数validateForm（）
{
var返回值=真；
var x=document.forms[“myForm”][“firstname_4”].value；
如果（x==null | | x==“”）
{
document.getElementById（“error1”）.innerHTML=“必须填写名字”；
返回值=false；
}
var y=document.forms[“myForm”][“selectid”]；
if（y.options[y.selectedIndex].value==“Title”）
{
document.getElementById（“error2”）.innerHTML=“您需要选择一个标题”；
返回值=false；
}
返回_值；
}
名字：
标题：

Html：

<select id="ddl"> <option value="Title" id="title_3-0" selected>Title</option><option  value="Mr" id="title_3-1">Mr</option>
 <option value="Mrs" id="title_3-2">Mrs</option><option value="Miss" id="title_3- 3">Miss</option>
 <option value="Ms" id="title_3-4">Ms</option><option value="Dr" id="title_3-5">Dr</option>
 <option value="Professor" id="title_3-6">Professor</option></select>

<input type="text" class="text" name="firstname_4" id="amf-input-firstname_4" value="" placeholder="First Name">
    <input type="button" value="Submit" id="btn"/>
    <span id="error"/>

演示：

---

所以问题是，如何将消息放在页面本身而不是弹出警告框？是的，我不熟悉Javascript。消息可以作为摘要显示在div中，也可以显示在每个控件下。这不是JavaScript问题（或者至少，它不仅仅是JavaScript问题）。您必须将所需消息设计为HTML的一部分，然后在该元素上使用CSS

display:none

隐藏这些元素。然后，动态显示或隐藏错误消息（该部分是JavaScript）。但第一步是在出现错误时按照您希望的方式获取HTML和CSS。@user3120015，您完全正确。您可以通过在html中添加一个带有id的div元素（比如id=“testing”）来实现。然后，您可以从javascript调用

document.getElementById（'testing'）.innerHTML=“您要放置的文本”如何让它们同时验证，因为它只执行第一个if语句？我用一种方法更新了我的答案。诀窍是将
返回true/false
放在方法的末尾。
$('#btn').click(function (){
        if(($('#amf-input-firstname_4').val()=='') || ($("#ddl :selected").val() == 'Title'))
    {  
        $('#error').html('Please select title and enter name.');
    }
    else
    {
       $('#error').html('Success'); 
    }
    return false;
});