0

ユーザーがパスワードフィールドを空白のままにするたびにエラーメッセージを返そうとしていますが、機能していないようです。どうすればこれを行うことができますか？私は最新の jQuery プラグインと一緒に jQuery 検証を使用しています - http://docs.jquery.com/Plugins/Validationの例に従っています。

これまでの私のコードは次のとおりです: http://jsfiddle.net/k6cvb/。

HTML

<div id="logo_box"></div>
<form action="#" id="login_form" method="post">
  <div id="login_box">
    <div style="width: 100%;">Department<br />
      <select style="width: 250px; padding-left: 5px;" class="required">
        <option selected="selected">CO</option>
      </select>
    </div>
    <br />
    <div style="width: 100%; padding-bottom: 20px; ">Password<br />
      <input id="field" type="password" style="width: 243px;  padding-left: 5px;" class="required"/>
    </div>
    <div style="float: left; padding-top: 6px;"> <a id="forgotpass_link">Forgot your password?</a></div>
    <div style="float:right">
      <input id="login_btn" type="submit" value="Log in"/>
    </div>
  </div>
  </form>
  <div align="center" id="footer">
  </div>​

CSS

body {
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #a0a0a0;
    border-top: 3px solid #EAEAEA;

}
#logo_box {
    margin: auto;
    width: 110px;
    margin-top: 50px;
    padding-bottom: 20px;
}
#login_box {
    width: 250px;
    height: 155px;
    margin: auto;
    padding: 20px;
    font-size: 14px;
    margin-top: 1px;
    background-color: #F0F0F0;
    color: #333;
    border: 1px solid #E1D0E8;
}
select, #field {
    border: 1px solid #DDD;
    height: 30px;
    font-size: 14px;
}
#login_btn {
    border: 1px solid #DDD;
    height: 30px;
    font-size: 14px;
    width: 80px;
    font-weight: bold;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;    
    background: #F6F6F6;
    color: #ABABAB;
}

#login_btn:hover {
    border: 1px solid #C06;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;    
    background: #C06 ;
    color: #fff;
    cursor: pointer;
}

#login_btn:active {
    border: 1px solid #C06;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;    
    background: #fff;
    color: #C06;
    cursor: pointer;
}

#forgotpass_link {
    color: #306;
}

#forgotpass_link:hover {
    color: #C06;
    cursor: pointer;
}

#footer {
    padding-top: 15px;
    font-size: 12px;
}​

JS

  $(document).ready(function(){
    $("#login_form").validate();
  });​

ありがとう

4

4 に答える 4

0

入力タグに name 属性がありません...確認してください..追加すると機能します

input id="field" type="password" style="width: 243px;  padding-left: 5px;" class="required" name="password"/>  // added name filed.. password in this case

次の点に注意してください:
name 属性は、JavaScript 内の要素を参照するため、またはフォームが送信された後にフォーム データを参照するために使用されます。

name 属性を持つフォーム要素のみが、フォームの送信時に値が渡されます。

このフィドルを試してください...

http://jsfiddle.net/k6cvb/16/

CSS

label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
于 2012-10-31T09:34:31.840 に答える
0

これを試して ：

 $(document).ready(function(){
  $("submit buton id").live({
      click : function(e){
          e.preventDefault();

  if($("#login_form").validate()){
       //write code to submit the form
  }else{
       //do whatever you want if the form is not valid
   }
  }
  }); 
})
于 2012-10-31T09:23:05.567 に答える
0

class="required" の代わりに、入力フィールドで "required" のみを使用してみてください

<input id="field" type="password" style="width: 243px;  padding-left: 5px;" required/>
于 2012-10-31T09:40:16.737 に答える
0

Jquery プラグインの検証では、追加する必要がfield nameありclass="required" 、フィールドを必須にする必要がありminlength="6"、入力文字列の長さを最小 6 にする必要があります。

      <input id="field" type="password" style="width: 243px;  padding-left: 5px;" class="required" class="required password"  name="password" minlength="6"/>

ありがとう。

于 2012-10-31T09:41:23.370 に答える