Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Build an Interactive Website Form Validation and Manipulation jQuery Utility Methods

Ashley Dillon
Ashley Dillon
9,092 Points
Posted by Ashley Dillon
Ashley Dillon
9,092 Points

jquery form centering

I want to center my jquery form in the "Smells like Bakin'" website, and when I: label, input, textarea, span { float: center;

It centers, but then the fade-in messages are pushing my boxes to the side. So how do I center this form and have the fade-in messages still appear on the side without affecting the form?

3 Answers

Fabrício Montenegro
Fabrício Montenegro
18,721 Points
Fabrício Montenegro
Fabrício Montenegro
18,721 Points

I didn't really took this course and don't know what you're going through, but I can say the float property doesn't have a center value. The possible values are left | right | none

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

There's no float: center but there is a margin: auto and text-align: center you probably want one of those.

example: http://bluerobot.com/web/css/center1.html

Ashley Dillon
Ashley Dillon
9,092 Points
Ashley Dillon
Ashley Dillon
9,092 Points

When I do margin auto, the form is centered but each box is still pushed to the left when the fade-in message is present.

For example the "name box" is pushed to the left when "please enter your name" helper message appears.

Any clue why this might be happening?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

In order to answer that, you'll need to show us your code, for some tips on how to do that check out the tips for asking questions video in the right-hand sidebar.

Ashley Dillon
Ashley Dillon
9,092 Points
Ashley Dillon
Ashley Dillon
9,092 Points

Here's the Javascript:

    <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript">
            var $sumbit= $(".submit input");
            var $required=$(".required");

            function containsBlanks(){
                var blanks= $required.map(function(){
                    return $(this).val()=="";});
                    return $.inArray(true, blanks) !=-1;

            }

            function isValidEmail(email){
                return email.indexOf("@") !=-1;
            }

            function requiredFilledIn(){
                if(containsBlanks() || !isValidEmail($("#email").val())) 
                    $sumbit.attr("disabled","disabled");
                else 
                    $sumbit.removeAttr("disabled");
            }


            $("form span").hide();
            $("input,textarea").focus(function(){
                $(this).next().fadeIn("slow");
            }).blur(function(){
                $(this).next().fadeOut("slow");
            }).keyup(function(){
                //Check all required fields.
                requiredFilledIn();
            });

            $("#email").keyup(function(){
                //Check for a valid email.
                if(isValidEmail($(this).val())) $(this).next().removeClass("error").addClass("valid");
                else 
                    $(this).next().removeClass("valid").addClass("error");
            });

            requiredFilledIn();

and CSS:

    .btn-submit {
    width: 150px;
    float: center;
    margin: 3% 0;
    border: 0;
    padding: 10px 25px;
    color: white;
    font-size: .75em;
    background-color: darkgray;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    text-transform: uppercase;
}

label, input, textarea, span {
        margin:auto;


    }
    label {
        width: 100%;
        margin: 2% 0;
    }
    input[type=text], textarea {
        width: 30%;
        border: solid grey 1px;
        color: black;

    }
    input, textarea {
        padding: 1%;
        border: solid grey 1px;
        border-radius: 10px;
    }
    input:focus, textarea:focus { 
        outline: none;
        border: solid grey 1px;
    }
    .required {
    }
    textarea {
        height: 100px;
    }

    p {
        clear:both;
        min-height: 25px;
    }
    #form span {

        float: center;
        border-radius: 15px;
        margin-left:5px;
        padding: 8px 35px;
        background: darkgrey;
        color:white;
    }
    #form span.valid {
        background-color :grey;
        color: white;
    }
    #form span.error {
        background-color:#b0240f;
        color: white;
    }
James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

For issues with this much code it's best to make a codepen when you make the pen, don't forget the HTML.