[SOLVED] can someone help me with displaying an error?

Reaper0167 · December 27, 2008

I have been going at this for a week now and it is starting to drive me crazy. I have a form with a couple of fields, three to be exact with a submit button. if one of the fields is not filled in and left blank I would like to have an error message appear to the right of the text field. i don't like the pop up error messages in a separate window(looks unprofessional). are there any tutorials out there to help me out, or could someone throw me a bit of code to work with. thanks. sorry about all the posts about this.

Psycho · December 27, 2008

Here's one solution.

<html>
<head>
<style>
.error { color: #ff0000; }
</style>
<script type="text/javascript">

function validate(formObj)
{
    var valid = true;

    if (formObj.uname.value)
    {
        document.getElementById('uname_error').innerHTML = '';
    }
    else
    {
        document.getElementById('uname_error').innerHTML = 'User name is required.';
        valid = false;
    }

    if (formObj.address.value)
    {
        document.getElementById('address_error').innerHTML = '';
    }
    else
    {
        document.getElementById('address_error').innerHTML = 'Address is required.';
        valid = false;
    }

    if (formObj.phone.value)
    {
        document.getElementById('phone_error').innerHTML = '';
    }
    else
    {
        document.getElementById('phone_error').innerHTML = 'Phone number is required.';
        valid = false;
    }

    return valid;
}

</script>
</head>

<body>
<form name="theForm" onsubmit="return validate(this);">
  Enter your info:<br><br>
  User Name: <input type="text" name="uname"> <span id="uname_error" class="error"></span><br>
  Address: <input type="text" name="address"> <span id="address_error" class="error"></span><br>
  Phone: <input type="text" name="phone"> <span id="phone_error" class="error"></span><br>
  <br>
  <button type="submit">Submit</button>
</form>
</body>
</html>

Reaper0167 · December 27, 2008

wow,,, thank you so much..i'm sure there is other people out there that want to know this also so I'm going to post this wherever i can if your ok with that... thanks again!!

Reaper0167 · December 28, 2008

well, still having a little problem. when i click on the log in button it does nothing. anyone see something wrong in the coding. for some reason the color code is not working for me, sorry

<html>
<head>

    <style type="text/css">
    .error { color: #ff0000; }
    </style>

    <!-- using javascript to make sure fields are not left empty -->

    <script type="text/javascript" language="javascript">

    function validate(form1)
    {
    var valid = true;

    if (form1.username.value)
    {
        document.getElementById('username_error').innerHTML = '';
    }
    else
    {
        document.getElementById('username_error').innerHTML = 'Please enter a username.';
        valid = false;
    }

    if (form1.address.value)
    {
        document.getElementById('password_error').innerHTML = '';
    }
    else
    {
        document.getElementById('password_error').innerHTML = 'Please enter a password.';
        valid = false;
    }
    return valid;
    }
    </script>
    <style type="text/css">
    <!--
    body {
    background-color: #FFFFFF;
    }
    .style3 {color: #000000}
    -->
    </style>

    <title></title>
    <style type="text/css">
    p.c3 {text-align: center}
    div.c2 {text-align: right}
    div.c1 {text-align: center}
    </style>
</head>

<body>
    <p> </p>

    <p> </p>

    <p> </p>

    <p> </p>

    <table width="100%" height="36" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td height="36">
                <div class="c1">
                    <img src="pics/header.png" alt="header" width="433" height="37">
                </div>
            </td>
        </tr>
    </table>

    <div class="c1">
        <br>
         Hi, please log in.
    </div>
    <br>
     

    <form id="form1" name="form1" onSubmit="return validate(this);">
        <table width="100%" border="0" cellspacing="3" cellpadding="0">
            <tr>
                <td width="39%">
                    <div class="c2">
                        <label for="username">Username:</label>
                    </div>
                </td>

                <td width="61%"><input name="username" type="text" span id="username_error" class="error" size="35"></td>
            </tr>

            <tr>
                <td>
                    <div class="c2">
                        <label for="password">Password:</label>
                    </div>
                </td>

                <td><input name="password" type="password" span id="password_error" class="error" size="35"></td>
            </tr>

            <tr>
                <td> </td>

                <td><input type="submit" name="submit" id="submit" value=" Log in"></td>
            </tr>
        </table>
    </form>

    <p class="c3">Don't have a username?
    <br>
     Click here to register.</p>
</body>
</html>

<!-- using javascript  to set focus of the cursor on the username textfield -->
<script type="text/javascript" language="javascript">

    document.form1.username.focus();

</script>
?>

Psycho · December 29, 2008

Your HTML is fouled up. There is a "span" element within the input tag along with the ID that is meant for the span tag. Also, the 2nd validation is checking the 'address' field which doesn't exist:

<html>
<head>

    <style type="text/css">
    .error { color: #ff0000; }
    </style>

    <!-- using javascript to make sure fields are not left empty -->

    <script type="text/javascript" language="javascript">

    function validate(form1)
    {
        var valid = true;

        if (form1.username.value)
        {
            document.getElementById('username_error').innerHTML = '';
        }
        else
        {
            document.getElementById('username_error').innerHTML = 'Please enter a username.';
            valid = false;
        }

        if (form1.password.value)
        {
            document.getElementById('password_error').innerHTML = '';
        }
        else
        {
            document.getElementById('password_error').innerHTML = 'Please enter a password.';
            valid = false;
        }
        return valid;
    }

    <!-- using javascript  to set focus of the cursor on the username textfield -->
    window.onload = function(){ document.form1.username.focus(); }
    </script>

    <style type="text/css">
    <!--
    body {
    background-color: #FFFFFF;
    }
    .style3 {color: #000000}
    -->
    </style>

    <title></title>
    <style type="text/css">
    p.c3 {text-align: center}
    div.c2 {text-align: right}
    div.c1 {text-align: center}
    </style>
</head>

<body>
    <p> </p>

    <p> </p>

    <p> </p>

    <p> </p>

    <table width="100%" height="36" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td height="36">
                <div class="c1">
                    <img src="pics/header.png" alt="header" width="433" height="37">
                </div>
            </td>
        </tr>
    </table>

    <div class="c1">
        <br>
         Hi, please log in.
    </div>
    <br>
     

    <form id="form1" name="form1" onSubmit="return validate(this);">
        <table width="100%" border="0" cellspacing="3" cellpadding="0">
            <tr>
                <td width="39%">
                    <div class="c2">
                        <label for="username">Username:</label>
                    </div>
                </td>

                <td width="61%">
                    <input name="username" type="text" size="35" />
                    <span id="username_error" class="error"></span>
                </td>
            </tr>

            <tr>
                <td>
                    <div class="c2">
                        <label for="password">Password:</label>
                    </div>
                </td>

                <td>
                    <input name="password" type="password"  size="35" />
                    <span id="password_error" class="error"></span>
                </td>
            </tr>

            <tr>
                <td> </td>

                <td><input type="submit" name="submit" id="submit" value=" Log in"></td>
            </tr>
        </table>
    </form>

    <p class="c3">Don't have a username?
    <br>
     Click here to register.</p>
</body>
</html>

Sign In

[SOLVED] can someone help me with displaying an error?

Recommended Posts

Reaper0167

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Reaper0167

Link to comment

Share on other sites

Reaper0167

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information