Javascript jQuery验证字段：在输入有效信息时使错误消息消失

我下面的代码会在输入信息后显示和消失消息，但我希望错误消息一次显示一条，即使我有多个字段要验证。现在，单击按钮即可显示所有验证

HTML:

---

我希望这对你有帮助。下次，让你的代码可读，并发布完整的代码，没有任何语法错误，如括号关闭或手动错误，如没有提交按钮等

$（文档）.ready（函数（）{
$（“#mysubmit”）。单击（函数（）{
var myFirstName=$（“#first_name”）.val（）.trim（）.length；
//$（“#名字”）.val（我的名字）；
var myLastName=$（“#姓氏”）.val（）.trim（）.length；
//$（“姓氏”）.val（myLastName）；
//var myfirstnamererror=$（'#first_error'）.val（）；
//$（“#第一个_错误”）.val（“”）；
如果（myFirstName>0）
{
$（“#第一个#错误”）.html（“”）；
}
其他的
{
$（“#first_error”）.html（“必须输入名字”）；
}
如果（myLastName>0 | |！myFirstName>0）
{
$（“#最后一个#错误”）.html（“”）；
}
其他的
{
$（“#last_error”）.html（“您必须输入姓氏”）；
}
});
});



名字：


姓氏：


提交
首先，我为语法错误道歉。其次，您的代码运行良好，但我希望每个字段一次验证一个字段。因此，当我第一次单击按钮时，会出现“名字”错误，然后“姓氏”错误才会出现，直到我输入名字，然后尝试单击按钮而不输入姓氏。有什么想法吗？编辑了我的代码。在这里，条件的顺序很重要。请注意。对不起，没有电子邮件，如果你想问什么，你可以把它贴在这里。更多有经验的开发人员将在这里解决您的问题。但是在你发布任何东西之前先研究一下。
<form>
    <br>
    <label for="first_name">First Name:</label>
    <input type="text" id="first_name" name="first_name" required> <span class="error" id="first_error"></span>

<label for="last_name">Last Name:</label>
    <input type="text" id="last_name" name="last_name" required> <span class="error" id="last_error"></span>

$(document).ready(function(){

$("#mysubmit").click(function(){
    var myFirstName = $("#first_name").val().trim();
     $("#first_name").val(myFirstName);

    var myLastName = $("#last_name").val().trim();
     $("#last_name").val(myLastName);

    var myFirstNameError = $('#first_error').val();
    $('#first_error').val("");

    if(!myFirstName)
     {
         $("#first_error").html("You must Enter a First Name");  
     }
     else
     {
          $("#first_error").html("");
     }

     if(!myLastName)
     {
         $("#last_error").html("You must Enter a Last Name");    
     }
     else
     {
          $("#last_error").html("");
     }