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

试试这个 ：

 $(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

您的输入标签没有名称属性...请检查..添加它并且它有效

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

而不是 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" make 字段 required 和minlength="6"make input string length minumum 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 回答