accesing a form with Strict XHTML 1.0

furia_cross · August 26th, 2005, 01:29 PM

I have made an Strict XHTML 1.0 document with a form as shown below:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

    <head>
        <title>JavaScript One</title>
        <link rel="stylesheet" type="text/css" href="jsOne.css" />
        <script type="text/javascript" src="jsOne.js"></script>        
    </head>

    <body>
        <h1>Form Test</h1>
        <h2>Form Validation One</h2>
        <form action="createAccount.php" method="post" name="formCreateAccount" onsubmit="return validate(this);" >
            <table>
                <tr>
                    <td><b>Create Account</b></td>
                </tr>
                <tr>
                    <td>Username: </td>
                    <td><input type="text" name="textUsername" />#160;(minimum 6 characters long)</td>
                </tr>
                <tr>
                    <td>Password: </td>
                    <td><input type="password" name="passPassword" />#160;(minimum 8 characters long)</td>
                </tr>
                <tr>
                    <td>Confirm Password: </td>
                    <td><input type="password" name="passConfirmPassword" /></td>
                </tr>
                <tr>
                    <td><input type="submit" value="Create" /></td>
                </tr>
            </table>
        </form>
        <p>v1.5</p>
    </body>

</html>

The only problem is that the validator of W3 won't validate it as Strict XHTML 1.0, because the name attribute is deprecated. I know that but what can I do to fix this bug and let is be a Strict XHTML 1.0 document.

Extra:

The JavaScript I used for the form validation:

Code:

function validate(form) {

    var formFilled = true;

    var username = document.formCreateAccount.textUsername.value;
    var password = document.formCreateAccount.passPassword.value;
    var confirmedPassword = document.formCreateAccount.passConfirmPassword.value;

    if(username.length < 6){
        alert("Your username must be at least 6 charcaters long!");
        document.formCreateAccount.textUsername.value = "";
        formFilled = false;
    }
    if(password.length < 8){
        alert("Your password must be at least 8 characters long!");
        document.formCreateAccount.passPassword.value = "";
        document.formCreateAccount.passConfirmPassword.value = "";
        formFilled = false;
    }
    if(password !== confirmedPassword){
        alert("Your password doen't match the confirmed one!");
        document.formCreateAccount.passPassword.value = "";
        document.formCreateAccount.passConfirmPassword.value = "";
        formFilled = false;
    }
    return formFilled;
}

The PHP file which process the value filled in on the form

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>Submit to database</title>
        <link rel="stylesheet" type="text/css" href="jsOne.css" />
    </head>
    <body>
        <?php
            $username = $_POST['textUsername'];
            $password = $_POST['passPassword'];
            echo "Your username is: ".$username."<br />";
            echo "Your password is: ".$password."<br />";
        ?>
    </body>
</html>

I would be very pleased if you can help me validating this document as Strict XHTML 1.0!

Thank you in advanced! Greetz Thijs from the Netherlands!

Imar · August 26th, 2005, 01:36 PM

Hi Thijs,

You can use document.getElementById to get a reference to a form or to one of its controls. Then you can drop the name attribute from the form tag.

  var formFilled = true;
  var theForm = document.getElementById ('formCreateAccount')
  // Now you have a reference to the form. Use it to call sumbit() for example:
  //theForm.submit();

  '' Same works for text boxes:
  var username = document.getElementById('textUsername').value;
  // etc

I think you'll need to leave the name attribute on the form controls to make sure they are submitted to the server. That should be valid XHTML though.

Cheers,

Imar

furia_cross · August 27th, 2005, 09:48 AM

Thanks a lot Imar! It works good and it validate Strict XHTML 1.0!

Greetz Thijsje!