Full web app utilizing HTML, CSS, and JavaScript

Having started a new software dev role recently I'm in the process of developing my first full web app project using the following stack HTML + CSS + JavaScript + PHP.

I'm new in terms of applying these lessons I have learnt in the recent past in each language (as you might see from my basic sounding earlier questions) and I was wondering if I'm so far I'm adhering to the best possible practices in terms of developing the UI bits of the project.

I'm aware of numerous articles/tutorials which can guide me but advice from any experienced individual here on S/Overflow I feel would be equally valuable.

My first development objective is to achieve the development of a registration page which serves as the landing page. In simple terms the design is as follows:

• A navigation bar running at the top

• A welcome message section

• An image and text carousel with an automatic slideshow

• Facebook and Google registration buttons.

• A registration form

• A footer bar

Below is my HTML code:

`






Sign Up or Log In


















-->

-->




Sign Up or Log In

• LOG IN

• HOW IT WORKS

• FEATURES

• ABOUT US

Welcome message ... Welcome message ... Welcome message ... Welcome message ... Welcome message ...

















Caption A







Caption B







Caption C











Sign up with Facebook



Sign up with Google

I will comment on the JavaScript only.

Each of your change handlers are doing essentially the same thing: check if the field is null, a single space, or the empty string and add a message to a notification panel.

The textbox text attribute will not return a null -- only empty string. I assume in checking for a single space you are invalidating whitespace values. As written however, a double space (" ") would validate. I'm not familiar with the YUI library, but given its prevalence would be quite surprised if it did not contain dim sort of isNullOrWhitespace utility method.

The same notification area appears to be updated each time, but is looked up each time. Only the message is different. I would suggest the following factory method:

var notificationArea = document.getElementById('sign_up_notification_id');

function fieldValidator (field, invalidMessage) {
    return function () {
        if (isNullOrWhitespace(field.value)
        notificationArea.innerHTML = invalidMessage;
    };
}

Where isNullOrWhitespace is the utility mentioned above, and use it like this:

document.registration_form.firstname.onfocus = fieldValidator (document.getElementById('firstname_id'), "(Please enter first name)");

StackExchange Code Review Q#79975, answer score: 4