CODEWITHSUNDEEP
phphtmlcss
Jakob Staudal
Jakob Staudal

Reputation: 21

Make html form text field required

I have a problem concerning how to add data from a text field into a SQL table on a database. I would like the text fields to require some sort of data so there can be no blank data in the table. However, I cannot seem to get it to work.

The code below shows my problem.

The page where the user is created: 

<html>
<head>
    <title>Eksamensprojekt</title>
    <style>
        .outer {
            display: table;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
        }
        .middle {
            display: table-cell;
            vertical-align: middle;
        }
        .login-form {
            margin-left: auto;
            margin-right: auto;
            width: 400px;
            font-family: Tahoma, Geneva, sans-serif;
        }
        .login-form h1 {
            text-align: center;
            color: #4d4d4d;
            font-size: 24px;
            padding: 20px 0 20px 0;
        }
        .login-form input[type="password"],
        .login-form input[type="text"] {
            width: 100%;
            padding: 15px;
            border: 1px solid #dddddd;
            margin-bottom: 15px;
            box-sizing:border-box;
        }
        .login-form input[type="submit"] {
            width: 100%;
            padding: 15px;
            background-color: #535b63;
            border: 0;
            box-sizing: border-box;
            cursor: pointer;
            font-weight: bold;
            color: #ffffff;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="middle">
            <div class="login-form">
                <h1>Associhunt</h1>
                <form method="get">
                    <input type="text" name="firstname" placeholder="First name"><br>
                    <span class="error">* <?php echo $nameErr;?></span>
                    <input type="text" name="email" placeholder="E-mail"><br>
                    <input type="text" name="tlfnr" placeholder="Phone"><br>
                    <input type="text" name="position" placeholder="Current job position"><br>
                    <input type="text" name="username" placeholder="Username"><br>
                    <input type="text" name="password" placeholder="Password"><br>
                    <input type="submit" value="Opret bruger" name="opretbruger">
                </form>
            </div>
            <div class="login-form">
                <form method="get" action="../login/">
                    <input type="submit" value="Already have an account?">
                </form>
            </div>
        </div>
    </div>
    <?php
        $conn = new mysqli($servername, $username, $password,$dbnavn);
        if ($conn->connect_error)   die("Fejl: " . $conn->connect_error);
        
        if (isset($_GET['opretbruger']))
        {
            $firstname=$_GET['firstname'];
            if ($firstname===NULL) die();

            $lastname=$_GET['lastname'];
            if ($lastname===NULL) die();

            $email=$_GET['email'];
            if ($email===NULL) die();

            $tlfnr=$_GET['tlfnr'];
            if ($tlfnr===NULL) die();

            $position=$_GET['position'];
            if ($position===NULL) die();

            $username=$_GET['username'];
            if ($username===NULL) die();

            $password=$_GET['password'];
            if ($password===NULL) die();


            $sql="INSERT INTO UserData
            (
                firstname,
                lastname,
                email,
                tlfnr,
                position,
                username,
                password
            )
            VALUES ('".$firstname."','".$lastname."','".$email."','".$tlfnr."','".$position."','".$username."','".$password."')";

            $conn->query($sql);
            if ($conn->affected_rows >0 ) 
            {
                echo "Bruger oprettet!"; 
            }
            else 
            {
                echo "Bruger ikke oprettet!";
            };
        };
    ?>
</body>
</html>

The table creation:

<?php

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

// sql to create table
$sql = "CREATE TABLE UserData (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, 
firstname VARCHAR(30) NOT NULL,
lastname VARCHAR(30) NOT NULL,
email VARCHAR(50) NOT NULL,
tlfnr INT(8) NOT NULL,
position VARCHAR(50),
username VARCHAR(40) NOT NULL,
password VARCHAR(40) NOT NULL,
reg_date TIMESTAMP
)";

if ($conn->query($sql) === TRUE) {
    echo "Table UserData created successfully";
} else {
    echo "Error creating table: " . $conn->error;
}

$conn->close();
?>

Upvotes: 0

Views: 71

Answers (2)

Will
Will

Reputation: 2410

Have you look at the required attribute ?

Below your code with the attribute added :

<html>
<head>
    <title>Eksamensprojekt</title>
    <style>
        .outer {
            display: table;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
        }
        .middle {
            display: table-cell;
            vertical-align: middle;
        }
        .login-form {
            margin-left: auto;
            margin-right: auto;
            width: 400px;
            font-family: Tahoma, Geneva, sans-serif;
        }
        .login-form h1 {
            text-align: center;
            color: #4d4d4d;
            font-size: 24px;
            padding: 20px 0 20px 0;
        }
        .login-form input[type="password"],
        .login-form input[type="text"] {
            width: 100%;
            padding: 15px;
            border: 1px solid #dddddd;
            margin-bottom: 15px;
            box-sizing:border-box;
        }
        .login-form input[type="submit"] {
            width: 100%;
            padding: 15px;
            background-color: #535b63;
            border: 0;
            box-sizing: border-box;
            cursor: pointer;
            font-weight: bold;
            color: #ffffff;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="middle">
            <div class="login-form">
                <h1>Associhunt</h1>
                <form method="get">
                    <input type="text" name="firstname" required placeholder="First name"><br>
                    <span class="error">* <?php echo $nameErr;?></span>
                    <input type="text" name="email" required placeholder="E-mail"><br>
                    <input type="text" name="tlfnr" required placeholder="Phone"><br>
                    <input type="text" name="position" required placeholder="Current job position"><br>
                    <input type="text" name="username" required placeholder="Username"><br>
                    <input type="text" name="password" required placeholder="Password"><br>
                    <input type="submit" value="Opret bruger" name="opretbruger">
                </form>
            </div>
            <div class="login-form">
                <form method="get" action="../login/">
                    <input type="submit" value="Already have an account?">
                </form>
            </div>
        </div>
    </div>
    <?php
        $conn = new mysqli($servername, $username, $password,$dbnavn);
        if ($conn->connect_error)   die("Fejl: " . $conn->connect_error);
        
        if (isset($_GET['opretbruger']))
        {
            $firstname=$_GET['firstname'];
            if ($firstname===NULL) die();

            $lastname=$_GET['lastname'];
            if ($lastname===NULL) die();

            $email=$_GET['email'];
            if ($email===NULL) die();

            $tlfnr=$_GET['tlfnr'];
            if ($tlfnr===NULL) die();

            $position=$_GET['position'];
            if ($position===NULL) die();

            $username=$_GET['username'];
            if ($username===NULL) die();

            $password=$_GET['password'];
            if ($password===NULL) die();


            $sql="INSERT INTO UserData
            (
                firstname,
                lastname,
                email,
                tlfnr,
                position,
                username,
                password
            )
            VALUES ('".$firstname."','".$lastname."','".$email."','".$tlfnr."','".$position."','".$username."','".$password."')";

            $conn->query($sql);
            if ($conn->affected_rows >0 ) 
            {
                echo "Bruger oprettet!"; 
            }
            else 
            {
                echo "Bruger ikke oprettet!";
            };
        };
    ?>
</body>
</html>

Upvotes: 0

bhttoan
bhttoan

Reputation: 2736

You can use HTML input required attribute - for example, change:

<input type="text" name="email" placeholder="E-mail">

to 

<input type="text" name="email" placeholder="E-mail" required>

Upvotes: 4

Related Questions