проверка JQuery не работает на странице

Question

я получил на моей странице HTML этой форму

<div class="box fl-panel" id="wrap"> 
    <form id="sign_in" name="sign_in" class="fm-v" action="" method="post" onsubmit="Javascript:void(0)"> 
     <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
     <tbody> 
      <tr> 
       <td class="form_head" colspan="2">Sign In</td> 
      </tr> 
      <tr> 
       <td class="form_username"> 
        <label for="user_name" class="fl-label">Email:</label> 
       </td> 
       <td class="form_username_input"> 
        <input id="user_name" name="Email" class="required" tabindex="1" accesskey="u" size="25" autocomplete="false" type="text"> 
       </td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td class="form_submit"> 
        <input name="lt" value="*" type="hidden"> 
        <input id="submit_sign_in" class="btn-submit" name="submit" accesskey="l" value="Send" tabindex="4" type="submit"> 
       </td> 
      </tr> 
     </tbody> 
     </table> 
    </form> 
</div> 

На странице в body тегах я поставил script тегов.

<script type="text/javascript" src="login/jquery.js"></script> 
<script type="text/javascript" src="login/jquery-ui.js"></script> 
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>   
<script type="text/javascript"> 
$(function(){ 
    $("#sign_in").validate({ 
      rules: { 
       user_name: "required" 
      }, 
      messages: { 
       user_name: "Wrong email" 
      }, 
      submitHandler: function(form) { 
       form.submit(); 
      } 
    }); 
}); 
</script> 

jquery validation плагин. Однако, когда я нажимаю на кнопку Send - ничего не произошло. В консоли браузера тоже нет. Что случилось?

Answer 1

Метод .validate() плагина jQuery Validate использует атрибут name, а не id.

rules: { 
    user_name: "required" // <- "user_name" must be the NAME attribute 
}, 
messages: { 
    user_name: "Wrong email" // <- "user_name" must be the NAME attribute 
}, 

Вам не нужно class="required" внутри input, так как вы уже объявили о required правила в рамках метода .validate().

HTML

<input id="user_name" name="user_name" tabindex="1" accesskey="u" size="25" autocomplete="false" type="text"> 

---

Кроме того, ваш submitHandler излишни ...

submitHandler: function(form) { 
    form.submit(); 
} 

То есть уже по умолчанию, поэтому нет никаких причин, чтобы указать его. Другими словами, вы можете полностью удалить submitHandler.

После того, как вы измените атрибут name в user_name, это будет рабочий код ...

$(function(){ 
    $("#sign_in").validate({ 
     rules: { 
      user_name: "required" 
     }, 
     messages: { 
      user_name: "Wrong email" 
     } 
    }); 
}); 

Рабочая DEMO: http://jsfiddle.net/vupdnd34/