CODEWITHSUNDEEP
jqueryhtml
Mackintoast
Mackintoast

Reputation: 1437

check display error message for an empty text field

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>

Upvotes: 1

Views: 21515

Answers (3)

The Alpha
The Alpha

Reputation: 146201

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.

Upvotes: 1

Rick Kuipers
Rick Kuipers

Reputation: 6617

You can make use of the onsubmit event in the form. Make sure you change:

<input type="button" value="Insert" onclick="ValidateForm"> into <input type="submit" value="Insert">

<form action="action.php" method="post" id="personID"> into <form action="action.php" method="post" id="personID" onsubmit="return ValidateForm();">

Complete code below:

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;
}


<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>

EDIT Very good point Heera, I wasn't really paying attention to that matter ;-) Fixed the code.

Upvotes: 0

user1106925
user1106925

Reputation:

This...

if(this.val()=="")

should be this...

if($(this).val()=="")

or this...

if(!$(this).val())

or this...

if(!this.value)

Passing this (which is a reference to the element) to the $ function returns a jQuery object that references the element.

That's what gives you the ability to call jQuery methods like .val().

You've actually got some messed up syntax too.

Change your code to this...

function ValidateForm() {
    if($("#personID").val()=="") {
        $("#error_msg").html("Field needs filling");
    }              
}

No need for $(document).ready() since the code doesn't run until the form is submitted.

Upvotes: 2

Related Questions