Question

I am trying to return an error message each the the user leaves the password field blank but it doesn’t seem to be working. How do I go about doing this? I am using jQuery validation along with the latest jQuery plugin – having followed the example here: http://docs.jquery.com/Plugins/Validation.

Here is my code so far: 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();
  });​

Thanks

Answer 1

your input tag has no name attribute… please check..add that and it works

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

Please note that :

The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.

Only form elements with a name attribute will have their values passed when submitting a form.

try this fiddle…

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

CSS

label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }