CODEWITHSUNDEEP
javascriptphphtmlforms
Clément
Clément

Reputation: 33

What do display message of Username required & Password required?

I don't know how do display message of Username required & Password required !

When i click to Submit it open automatically to index.php

It should display me Username required & Password required

Here's my code :

var username = document.form["vform"]["username"];
var email = document.form["vform"]["email"];
var password = document.form["vform"]["password"];
var password_confirmation = document.form["vform"]["password_confirmation"];



var name_error = document.getElementById("name_error");
var email_error = document.getElementById("email_error");
var password_error = document.getElementById("password_error");


username.addEventListener("blur", nameVerify, true);
email.addEventListener("blur", emailVerify, true);
password.addEventListener("blur", passwordVerify, true);



function Validate() {
    if (username.value == "") {
        username.style.border = "1px solid red";
        name_error.textContent = "Username is required";
        name.focus();
        return false;

    }


    if (email.value == "") {
        email.style.border = "1px solid red";
        email_error.textContent = "Email is required";
        email.focus();
        return false;

    }




    if (password.value == "") {
        password.style.border = "1px solid red";
        password_error.textContent = "Password is required";
        password.focus();
        return false;

    }


    // Check if two password match
    if (password.value != password_confirmation.value) {
        password.style.border = "1px solid red";
        password_confirmation.style.border = "1px solid red";
        password_error.innerHTML = "The two passwords don't match";
        return false;

    }
}


function nameVerify() {
    if (username.value != "") {
        username.style.border = "1px solid #5E6E66";
        name_error.innerHTML = "";
        return true;
    }
}


function emailVerify() {
    if (email.value != "") {
        email.style.border = "1px solid #5E6E66";
        email_error.innerHTML = "";
        return true;
    }
}


function passwordVerify() {
    if (password.value != "") {
        password.style.border = "1px solid #5E6E66";
        password_error.innerHTML = "";
        return true;
    }
}

I don't see where the error i think it's good there's no syntax error maybe something is missing.

Upvotes: 0

Views: 763

Answers (1)

Jay Blanchard
Jay Blanchard

Reputation: 34416

Make sure your form has the required attribute (HTML5):

<input type="text" name="username" required />
<input type="text" name="password" required />

No need for JavaScript validation. Make sure to validate on the server-side as well.

Upvotes: 1

Related Questions