1

私は小さな懸念があります：

現在、サインアップフォームをコーディングしており、jQueryの検証をテストすることにしました。残念ながら、返されたエラーメッセージはいたるところにありました。それがCSSの問題かどうかはわかりませんが、私は数時間アライメントと戦ってきました。本当に助けていただければ幸いです。

ここに画像の説明を入力してください

上の写真のように、「このフィールドは必須です」を取得しようとしています。テキストフィールドのすぐ下に配置されたテキスト。

これは私がこれまでに使用しているコードです：

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>

前もって感謝します！

アップデート

私はこのプラグインを使用しています：

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

4

4 に答える 4

3

CSSとHTMLの両方で更新が必要でした。

これが与えられたCSSアップデート、私が完全に与えたHTMLです。

HTMLの更新は、一般的なスタイルとより良い配置のために、クラス'フィールド'を持つ要素の下に<input/>とを配置しました。<select><div>

CSSアップデート

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

.field{
    display: block;
    width: auto;
    height: auto;
    float: left;
}

HTML

<div id="stylized" class="myform" >
    <form class="signup" method="post" action="#">
    <label>Username
    <span class="small">Enter a username.</span>
    </label>
    <div class="field">
        <input type="text" name="name" id="name" class="required"/>
    </div>
    <label>Email
    <span class="small">Enter a valid address.</span>
    </label>
    <div class="field">
        <input type="text" name="email" id="email" class="required"/>
    </div>
    <label>Password
    <span class="small">Enter a secure password.</span>
    </label>
    <div class="field">
        <input type="password" name="password" id="password" class="required"/>
    </div>
    <label>Confirm Password
    <span class="small">Enter your password again.</span>
    </label>
    <div class="field">
        <input type="password" name="password" id="password" class="required"/>
    </div>
    <label>Age
    <span class="small">Select your age range.</span>
    </label>
    <div class="field">
        <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>
    </div>
    <button type="submit">Sign up</button>
    </form>
</div>
于 2012-06-26T20:15:01.003 に答える
2

スタイルシートを更新します...

#stylized label.error {
    font-size: 12px;
    color: red;
    margin: -20px 0px 0px 170px;
}
于 2012-06-26T20:05:26.543 に答える
1

問題は、上記、html、css、またはvalidateのいずれでもないようです。ある意味では、レイアウト自体にあります。

Validateは、期待どおりに入力フィールドのすぐ下に追加しますが、入力とラベルの間に分割がないため、形成される新しい行がラベルの下から始まります。レイアウトを少し変更して、パーティションに分割し、片側が片側の入力にラベルを付け、古い学校のテーブルレイアウトのようにすると、検証は希望どおりに機能するはずです。

CSSを使用して、検証エラーコンテナにパディングまたはマージンを追加し、それをそのようにプッシュしようとすることもできますが、それでも完全に望ましい効果が得られない可能性があり、それを実行する方法を保留すると、すべてで機能しない可能性がありますそれに応じてブラウザ

于 2012-06-26T20:05:46.160 に答える
1

私はほんの数週間前に同じ問題を抱えていました。jQuery Validateプラグインは、入力の直後にエラーメッセージを挿入します。入力には20pxの下マージンがあります->メッセージは20px下にあります。

解決策：入力マージンを0に設定し、各入力フィールドをdivに配置し、divマージンを入力マージンが持っていた値に設定します。

編集：要求された例を追加

現在のcss：

#stylized input {
    float: left;
    font-size: 16px;
    padding: 4px 2px;
    border: solid 1px #aacfe4;
    width: 200px;
    margin: 2px 0 20px 10px;
}

変更されたcss：

#stylized input {
    float: left;
    font-size: 16px;
    padding: 4px 2px;
    border: solid 1px #aacfe4;
    width: 200px;
    margin: 0px;
}

.inputContainer {
    margin: 2px 0 20px 10px;
}

現在のhtml

<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"/>

変更されたhtml

<label>Username
<span class="small">Enter a username.</span>
</label>
<div class="inputContainer">
<input type="text" name="name" id="name" class="required"/>
</div>
<label>Email
<span class="small">Enter a valid address.</span>
</label>
<div class="inputContainer">
<input type="text" name="email" id="email" class="required"/>
</div>
于 2012-06-26T20:07:03.530 に答える