Question

我试图建立一个注册表单，用户可以注册我们的网站。数据将插入SQL数据库。当用户没有填写所有字段时，我显示了一个警报，它响应了用户尚未填写的所有内容。

我尝试用更加花哨的Snackbar替换警报。我从this示例中复制了HTML / CSS。然后我在表单验证结束时将警报更改为我的javascript中的showSnackBar函数。因为示例SnackBar没有更改文本的选项，所以我尝试在showSnackBar函数的构造函数中给出消息变量。然后使用x.innerHTML = message设置文本。不幸的是，这不起作用，我在控制台或其他任何地方都没有出错。

这是我的代码：

 <form name="aanmeldform" id="aanmeldform">
    <h4>Aanmelden met email.</h4>
    <p>Voornaam:</p>
    <input type="text" name="firstname" value="" />
    <p>Achternaam:</p>
    <input type="text" name="lastname" value="" />
    <p>Email:</p>
    <input type="text" name="email" value="" />
    <p>Herhaal email:</p>
    <input type="text" name="emailVerify" value="" />
    <p>Wachtwoord:</p>
    <input type="password" name="password" value="" />
    <p>Herhaal wachtwoord:</p>
    <input type="password" name="passwordVerify" value="" />
    <br>
    <p>Geboortedatum:</p>
    <input id="date" type="date" name="date" min="1900-01-01" max="2017-12-12" value="" />
    <p>Geslacht:</p>
    <div id="radiobox">
        <input type="radio" name="gender" value="Man" checked> Man<br>
        <input type="radio" name="gender" value="Vrouw" /> Vrouw<br>
    </div>
    <input type="radio" name="gender" value="Anders" /> Anders<br>
    <input type="submit" value="Aanmelden" />
</form>

<div id="snackbar">Sample sample sample</div>

CSS：

#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: red; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 18548486486; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible; /* Show the snackbar */

/* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

PHP：

$link = mysqli_connect("sample", "sample", "sample", "sample");

    // Check connection
    if($link === false){
        die("ERROR: Could not connect. " . mysqli_connect_error());
    }

    $first_name = mysqli_real_escape_string($link, $_REQUEST['firstname']);
    $last_name = mysqli_real_escape_string($link, $_REQUEST['lastname']);
    $email = mysqli_real_escape_string($link, $_REQUEST['email']);
    $password = mysqli_real_escape_string($link, $_REQUEST['password']);
    $sex = mysqli_real_escape_string($link, $_REQUEST['gender']);
    $birthdate = mysqli_real_escape_string($link, $_REQUEST['date']);

    // Attempt insert query execution
    $sql = "INSERT INTO account (email, first_name, last_name, password, sex, birthdate, credits) VALUES ('$email', '$first_name', '$last_name', '$password', '$sex', '$birthdate', '0')";
    if(mysqli_query($link, $sql)){
        echo "Records inserted successfully.";
    } else{
        echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
    }

    // Close connection
    mysqli_close($link);

JavaScript的：

function validateForm() {
    var message = "";
    var voornaam = document.forms["aanmeldform"]["firstname"].value;
    if (voornaam == "") {
        message+= "Vul een geldige voornaam in\n";
    }
    var achternaam = document.forms["aanmeldform"]["lastname"].value;
    if (achternaam == "") {
        message+= "Vul een geldige achternaam in\n";
    }

    var email = document.forms["aanmeldform"]["email"].value;
    if (validateEmail(email)) {
    } else {
        message+= "Vul een geldig emailadres in\n";
    }

    var verimail = document.forms["aanmeldform"]["emailVerify"].value;
    if (verimail != email) {
        message+= "De emailadressen zijn niet gelijk\n";
    }

    var wachtwoord = document.forms["aanmeldform"]["password"].value;
    if (wachtwoord == "") {
        message+= "Vul een geldig wachtwoord in\n";
    }
    var veriwachtwoord = document.forms["aanmeldform"]["passwordVerify"].value;
    if (veriwachtwoord != wachtwoord) {
        message+= "De wachtwoorden zijn niet gelijk\n";
    }
    var datum = document.forms["aanmeldform"]["date"].value;
    if (!datum) {
        message+= "Vul een geldige geboortedatum in\n";
    }

    if (message =="") {
        showSnackBar(message);
    }
};


function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
};

function showSnackBar(message) {
    // Get the snackbar DIV
    var x = document.getElementById("snackbar");
    //Set snackbar's text
    x.innerHTML = message;
    // Add the "show" class to DIV
    x.className = "show";

    // After x seconds, remove the show class from DIV
    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 5000);
};

由于页面刷新而未显示Snackbar？

0 个答案: