Jump to content

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


Reaper0167

Recommended Posts

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.

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>

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

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>

 

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.