Question

我试图返回一个错误消息，每个用户将密码字段留空但它似乎没有工作。我该怎么做呢？我正在使用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();
  });

由于

Answer 1

试试这个：

 $(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
   }
  }
  }); 
})

Answer 2

您的输入标记没有名称属性...请检查..添加该功能

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; }

Answer 3

而不是class =“required”尝试在输入字段中仅使用“required”

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

Answer 4

对于Jquery插件验证，您必须为需要的make字段添加field name和class="required"，并且必须为make输入字符串长度minumum 6添加minlength="6"。

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

感谢。

密码字段上的jQuery验证无效

4 个答案: