4
\$\begingroup\$

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:

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

   <title>Sign Up or Log In</title>

   <!-- Generic CSS -->
   <link href="stylesheets/public.css" rel="stylesheet">

   <!-- Social networking log in button CSS -->
   <link href="stylesheets/auth-buttons.css" rel="stylesheet">

   <link href="http://yui.yahooapis.com/combo?2.6.0/build/reset-fonts-grids/reset-fonts-grids.css&2.6.0/build/base/base-min.css" rel="stylesheet" >

   <!-- Bootstrap Core CSS -->
   <link href="stylesheets/bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">

   <!-- Custom CSS -->
   <link href="stylesheets/modern-business.css" rel="stylesheet">

   <!-- Custom Fonts -->
   <link href="font-awesome-4.1.0/stylesheets/font-awesome.min.css" rel="stylesheet">

   <!-- HTML5 Reset Stylesheet
   <link href="stylesheets/html5reset-1.6.1.css" rel="stylesheet"> -->

   <!-- Normalize CSS
   <link rel="stylesheet" href="stylesheets/normalize.css" />  -->    

   <script type="js/htmlfivepatterns.js"></script>

</head>

<body>
    <nav id="topbar"> 
        <a id="logo_link" href="">Sign Up or Log In</a>

        <ul>
            <li><a href="#" data-toggle="modal" data-target="#basicModal">LOG IN</a></li>
            <li><a href='#'>HOW IT WORKS</a></li>
            <li><a href='#'>FEATURES</a></li>
            <li><a href='#'>ABOUT US</a></li>   
        </ul>
    </nav>

    <!-- Welcome message -->
    <section class="welcome_message">Welcome message ... Welcome message ... Welcome message ... Welcome message ... Welcome message ... </section>

    <!-- Header Carousel -->
    <header id="myCarousel" class="carousel slide">

        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="fill" style="background-image:url('images/1900x1080imgtest1.jpg');"></div>

                <div class="carousel-caption">
                     <a class="carousel_caption" href="#">Caption A</a>
                </div>
            </div>

            <div class="item">
                <div class="fill" style="background-image:url('images/1900x1080imgtest2.jpg');"></div>

                <div class="carousel-caption">
                     <a class="carousel_caption" href="#">Caption B</a>
                </div>
            </div>

            <div class="item">
                <div class="fill" style="background-image:url('images/1900x1080imgtest3.jpg');"></div>

                <div class="carousel-caption">
                     <a class="carousel_caption" href="#">Caption C</a>
                </div>
            </div>
        </div>    
    </header>

    <!-- Page Content -->
    <section id="page_content" class="page_content_div">

        <div class="page_content_main_div">

            <div class="sign_up_div_option">
                <a class="btn-auth btn-facebook large" href="#">Sign up with <b>Facebook</b></a>
            </div>

            <div class="sign_up_div_option">
                <a class="btn-auth btn-google large" href="#">Sign up with <b>Google</b></a>
            </div>

            <hr class="hr"></hr>

            <form id="register_form_id" name="registration_form" action="#" method="POST" class="sign_up_form" >
                <div class="sign_up_heading_div">
                    <p>Or sign up with e-mail:</p>
                </div>

                <div class="sign_up_notification_div">
                    <span id="sign_up_notification_id"></span>
                </div>

                <div>
                    <input title="Enter first name" id="firstname_id" name="firstname" type="text" pattern="[a-zA-Z0-9]+" required placeholder="Enter first name">
                </div>

                <div>
                    <input title="Enter second name" id="secondname_id" name="secondname" type="text" pattern="[a-zA-Z0-9]+" required placeholder="Enter second name">
                </div>

                <div>
                    <input title="Enter an email" id="email_id" name="email" type="text" required placeholder="Enter email">
                </div>

                <div>
                    <input title="Enter a password" id="password_id" name="password" type="password" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" required placeholder="Enter password">
                </div>                

                <div>
                    <input title="Re-enter password" id="reenterpassword_id" name="reenterpassword" type="password" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" required placeholder="Re-enter password">
                </div>

                <div class="form_button_internal_div">
                    <button title="Type your second name" type="submit" class="btn_sign_up">Sign Up</button>
                </div>

                <div class="form_terms_of_service_internal_div">
                    <p class="terms_of_service">By signing up, I agree to the <a href='#' id="generic_link_decoration"><b>Terms of Service</b></a> and <a href='#' id="generic_link_decoration"><b>Privacy Policy</b></a>.</p>
                </div>                                
            </form>

        </div>
    </section>      

    <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal_header">

            <div class="modal_title">Sign up or Log In</div>
          </div>

          <div class="modal_body">

            <div class="log_in_div_option_a">
                <a class="btn-auth btn-facebook large" href="#">Log in with <b>Facebook</b></a>
            </div>

            <div class="log_in_div_option_b">
                <a class="btn-auth btn-google large" href="#">Log in with <b>Google</b></a>
            </div>

            <hr class="hr"></hr>

            <p class="log_in_div_option_c">Or log in using your e-mail</p>

            <div class="log_in_notification_div">
                <span id="log_in_notification_id"></span>
            </div>

            <div>
                <input title="Enter username" id="log_in_firstname_id" class="log_in_firstname" name="log_in_firstname" type="text" required placeholder="Enter e-mail">
            </div>

            <div>
                <input title="Enter password" id="log_in_firstname_id" class="log_in_enterpassword" name="log_in_enterpassword" type="password" required placeholder="Enter password">
            </div>         
          </div>

          <div class="modal-footer">
            <button type="button" class="btn_close" data-dismiss="modal">Close</button>

            <button type="button" class="btn_log_in">Log In</button>
          </div>

        </div>
      </div>
    </div>

    <section>
        <footer class="footer_div"> 
            <ul>
                <li><a href='#'>ABOUT</a></li>
                <li><a href='#'>TERMS OF SERVICE</a></li>
                <li><a href='#'>FEATURES</a></li>
                <li><a href='#'>HELP</a></li>
            </ul>     
        </footer>    
    </section>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="stylesheets/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>

    <!-- Script to Activate the Carousel i.e. directly related to carousel class name -->
    <script>
        $('.carousel').carousel( {
            interval: 3500 //changes the speed
        })

        document.registration_form.firstname.onfocus=function() {
            var validate_firstname = document.getElementById('firstname_id').value;

            if (validate_firstname == null || validate_firstname == " " || validate_firstname == "") {
                document.getElementById('sign_up_notification_id').innerHTML = "(Please enter first name)";
            } else {
                document.getElementById('sign_up_notification_id').innerHTML = "";
            }                                                 
        }

        document.registration_form.secondname.onfocus=function() {

            var validate_secondname = document.getElementById('secondname_id').value;

            if (validate_secondname == null || validate_secondname == " " || validate_secondname == "") {
                document.getElementById('sign_up_notification_id').innerHTML = "(Please enter second name)";
            } else {
                document.getElementById('sign_up_notification_id').innerHTML = "";
            }
        }

        document.registration_form.email.onfocus=function() {

            var validate_email = document.getElementById('email_id').value;

            if (validate_email == null || validate_email == " " || validate_email == "") {
                document.getElementById('sign_up_notification_id').innerHTML = "(Please enter e-mail)";
            } else {
                document.getElementById('sign_up_notification_id').innerHTML = "";
            }               
        }

        document.registration_form.password.onfocus=function() {

            var validate_password = document.getElementById('password_id').value;

            if (validate_password == null || validate_password == " " || validate_password == "") {
                document.getElementById('sign_up_notification_id').innerHTML = "(Please enter password)";
            } else {
                document.getElementById('sign_up_notification_id').innerHTML = "";
            }
        }

        document.registration_form.password.onfocus=function() {

            var validate_reenter_password = document.getElementById('reenterpassword_id').value;

            if (validate_reenter_password == null || validate_reenter_password == " " || validate_reenter_password == "") {
                document.getElementById('sign_up_notification_id').innerHTML = "(Please re-enter password)";
            } else {
                document.getElementById('sign_up_notification_id').innerHTML = "";
            }         
        }

        // Use onchange to find out if @ is part of user entered e-mail
        /*document.registration_form.email.onchange=function() {
            var userEnteredEmail = document.registration_form.email.value;

            if(email.indexOf("@")) {
                document.getElementById('sign_up_notification_id').innerHTML = "Invalid e-mail"; // value in '' is name of element which will display the error message
            }
        }

        // Use onblur to find out if @ is part of user entered e-mail
        document.registration_form.email.onblur=function() {
            if(document.registration_form.email.value="") {
                document.getElementById('sign_up_notification_id').innerHTML = "Please enter e-mail"; // value in '' is name of element which will display the error message
            }
        }*/
    </script>     

</body>

</html>
\$\endgroup\$

1 Answer 1

Reset to default
4
\$\begingroup\$

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)");
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.