Question

I have a minor concern:

I’m currently coding a sign up form and I decided to test jQuery validate. Unfortunately the error message returned was all over the place. Not sure if its a CSS problem but I’ve been battling with alignment for several hours and really would appreciate some help.

As seen in the picture above I’m trying to get the “This field is required.” text directly aligned under the text field.

This is the code I’m using so far:

jQuery

// sign up validation
$(".signup").validate();

CSS

.myform {
    width: 400px;
    padding-top: 25px;
    padding-left: 20px;
}
#stylized h1 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
}
#stylized p {
    font-size: 11px;
    color: #999;
    margin-bottom: 20px;
    border-bottom: solid 1px #b7ddf2;
    padding-bottom: 10px;
}
#stylized label {
    display: block;
    font-weight: bold;
    text-align: left;
    width: 160px;
    float: left;
}

#stylized label.error {
    float: none;
    font-size: 12px;
    color: red;
    margin-left: 1px;
}

#stylized .small {
    color: #999;
    display: block;
    font-size: 11px;
    font-weight: normal;
    text-align: left;
    width: 160px;
}
#stylized input {
    float: left;
    font-size: 16px;
    padding: 4px 2px;
    border: solid 1px #aacfe4;
    width: 200px;
    margin: 2px 0 20px 10px;
}
#stylized select {
    float: left;
    font-size: 16px;
    padding: 4px 2px;
    border: solid 1px #aacfe4;
    width: 75px;
    margin: 2px 0 20px 10px;
}
#stylized button {
    clear: both;
    margin-left: 169px;
    margin-top: 10px;
    cursor: pointer;
    color: #42230b;
    text-shadow: 1px 1px 0 #fff6b9;
    border: 1px solid #db9c2e;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #f7ce50;
    background: -webkitkit-gradient(linear, bottom, top, from(#f1ac33), to(#fef673));
    background: -moz-linear-gradient(bottom, #f1ac33, #fef673);
    font-size: 16px;
    padding: 5px 20px;
    font-weight: bold;
}
#stylized button:hover {
    clear: both;
    margin-left: 169px;
    margin-top: 10px;
    background: #edb954;
    background: -webkitkit-gradient(linear, bottom, top, from(#dc9f35), to(#fed273));
    background: -moz-linear-gradient(bottom, #dc9f35, #fed273);
    font-size: 16px;
    padding: 5px 20px;
    font-weight: bold;
}

HTML

<div id="stylized" class="myform" >
    <form class="signup" method="post" action="#">
    <label>Username
    <span class="small">Enter a username.</span>
    </label>
    <input type="text" name="name" id="name" class="required"/>
    <label>Email
    <span class="small">Enter a valid address.</span>
    </label>
    <input type="text" name="email" id="email" class="required"/>
    <label>Password
    <span class="small">Enter a secure password.</span>
    </label>
    <input type="password" name="password" id="password" class="required"/>
    <label>Confirm Password
    <span class="small">Enter your password again.</span>
    </label>
    <input type="password" name="password" id="password" class="required"/>
    <label>Age
    <span class="small">Select your age range.</span>
    </label>
    <select id="age" name="age" class="required">
    <option></option>
    <option>0 - 17</option>
    <option>18 - 25</option>
    <option>26 - 40</option>
    <option>40+</option>
    </select>                
    <button type="submit">Sign up</button>
    </form>
</div>

Thanks in advance!

UPDATE

I am using this plugin:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Answer 1

Update your stylesheet with…

#stylized label.error {
    font-size: 12px;
    color: red;
    margin: -20px 0px 0px 170px;
}