jQuery検証フィールド：有効な情報を入力するとエラーメッセージが表示されなくなる

Question

以下のコードは、情報が入力されるとメッセージが表示され消えますが、複数のフィールドがある場合でもエラーメッセージが一度に1つずつ表示されます。検証します。今すぐボタンをクリックするとすべての検証が表示されます。

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> 

のjQuery：

$(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(""); 
    } 

Answer 1

私は、これはあなたを助けることを願っています。次回はブラケット閉鎖、あるいは全くのボタンなど

私は、構文のエラーをお詫び申し上げます最初

$(document).ready(function(){ 
 

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

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

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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><br> 
 

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