Home/ Questions/Q 7165801
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T14:18:38+00:00

I would like to check if a text field in the post form is

  • 0

I would like to check if a text field in the post form is empty before posting using jquery. If any, I would like to display an error message right next to the text area. I click the button to submit the information with empty fields but there are no messages displayed. I need this check function before the posting is perform. Here is what I have done. 

<!DOCTYPE html>
    <html>
    <head>
    <script src="jquery-1.7.1.min.js"></script>
    <script>
    function ValidateForm()
    {
        $(document).ready(function(
              {
                  $("#personID").each(function()
                       {
                           if(this.val()=="")
                           {
                                $("#error_msg").html("Field needs filling");
                           }              
                       }      
              }
        ));

    }


    </script>
    </head>
    <body>
    <form action="action.php" method="post" id="personID">
    First Name: <input type="text" name="first"><span id="error_msg"></span></br>
    Last Name: <input type="text" name="last"><span id="error_msg"></span></br>
    Phone: <input type="text" name="phone"><span id="error_msg"></span></br>
    Mobile: <input type="text" name="mobile"></br>
    Position: <input type="text" name "pos"><span id="error_msg"></span></br>
    <input type="button" value="Insert" onclick="ValidateForm">
    </form>
    </body>
    </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The function should be

    function ValidateForm()
{
    $('span.error_msg').html('');
   var success = true;
    $("#personID input").each(function()
        {
            if($(this).val()=="")
            {
                $(this).next().html("Field needs filling");
                success = false;
            }
    });
    return success;
}

    and your form should be

    <form action="action.php" method="post" id="personID" onsubmit="return ValidateForm();">
    First Name: <input type="text" name="first"><span class="error_msg"></span></br>
    Last Name: <input type="text" name="last"><span class="error_msg"></span></br>
    Phone: <input type="text" name="phone"><span class="error_msg"></span></br>
    Mobile: <input type="text" name="mobile"></br>
    Position: <input type="text" name "pos"><span class="error_msg"></span></br>
    <input type="submit" value="Insert">
</form>

    You didn’t added any span next to your phone textbox and if it remains empty the form won’t be submitted and it won’t display error message as well, so be sure about it. If you want to leave it optional then add a class to it (class='optional') and change the function if($(this).val()=="") to if($(this).val()=="" && !$(this).hasClass('optional')). that’s it.

    • 0