I have a registration form page, and there is empty div i want to use to display errors. To check forms before triggering php script i use javascript:

function errorHandler(){
    var loginIn;
    var passIn;


    loginIn = document.forms["regForm"]["login"].value;
    passIn = document.forms["regForm"]["password"].value;

    if (loginIn == "" || loginIn == null) {
        alert("LOGIN CANNOT BE EMPTY");
        return false;
    } 
}

It works fine, and alert message do appear when i call them like this:

<form name="regForm" action= "save_user.php" onsubmit="return errorHandler()" method="post">.

But there is as i mentioned before a div inside of the form:

div id ="errorArea"></div> and when i try to put a text inside of this div like this:

function errorHandler(){

    var loginIn;
    var passIn;
    var erorAreaMessage;

    loginIn = document.forms["regForm"]["login"].value;
    passIn = document.forms["regForm"]["password"].value;
    erorAreaMessage = document.getElementById('errorArea').textContent;

    if (loginIn == "" || loginIn == null) {
        erorAreaMessage = "LOGIN CANNOT BE EMPTY";
        return false;
    }
}

Nothing happens, can someone explain me why?

I have a registration form page, and there is empty div i want to use to display errors. To check forms before triggering php script i use javascript:

function errorHandler(){
    var loginIn;
    var passIn;


    loginIn = document.forms["regForm"]["login"].value;
    passIn = document.forms["regForm"]["password"].value;

    if (loginIn == "" || loginIn == null) {
        alert("LOGIN CANNOT BE EMPTY");
        return false;
    } 
}

It works fine, and alert message do appear when i call them like this:

<form name="regForm" action= "save_user.php" onsubmit="return errorHandler()" method="post">.

But there is as i mentioned before a div inside of the form:

div id ="errorArea"></div> and when i try to put a text inside of this div like this:

function errorHandler(){

    var loginIn;
    var passIn;
    var erorAreaMessage;

    loginIn = document.forms["regForm"]["login"].value;
    passIn = document.forms["regForm"]["password"].value;
    erorAreaMessage = document.getElementById('errorArea').textContent;

    if (loginIn == "" || loginIn == null) {
        erorAreaMessage = "LOGIN CANNOT BE EMPTY";
        return false;
    }
}

Nothing happens, can someone explain me why?

• javascript
• php
• html

• 1 Changing the arorAreaMessage variable doesn't automatically change the textContent. You need to actually assign to the .textContent property. document.getElementById('errorArea').textContent = "LOGIN CA..." – cookie monster Commented Mar 21, 2014 at 21:20
• There is a stray closing curly brace (}) at the end of your code. – Sverri M. Olsen Commented Mar 21, 2014 at 21:21
• @SverriM.Olsen: That's the closing brace for the function errorHandler() { – cookie monster Commented Mar 21, 2014 at 21:22
• @cookiemonster Ah. I did not notice that. Never mind then. – Sverri M. Olsen Commented Mar 21, 2014 at 21:22
• 1 Yes, look into setTimeout to delay execution of code, and window.location to reload the page. – cookie monster Commented Mar 21, 2014 at 21:25

1 Answer 1

You need to put the value inside the <div>. That can done by setting the innerHTML or textContent property to your error-message. Try this -

...
if (loginIn == "" || loginIn == null) {
    document.getElementById('errorArea').textContent = "LOGIN CANNOT BE EMPTY";
    return false;
}}