2013-12-24 2 views
0

Я использую JQuery и JQuery Validate плагин на тестовой странице, мой код основан на validate demoJQuery Validate плагин не работает

<html> 
<head> 

    <script src="http://jquery.bassistance.de/validate/lib/jquery-1.9.0.js"></script> 
    <script type="text/javascript" src="scripts/jquery.validate.js"></script> 
    <script type="text/javascript"> 
     $.validator.setDefaults({ 
      submitHandler: function() { alert("submited!!!"); } 
     }); 

     $().ready(function() { 
      $("#registerForm").validate({ 
       rules : { 
        username: { 
         required: true, 
         minlength: 2 
        }, 
        password: { 
         required: true, 
         minlenght: 5 
        }, 
        confirm_password: { 
         required: true, 
         minlenght: 5, 
         equalTo: "#password" 
        }, 
        email: { 
         required: true, 
         email: true 
        } 
       }, 
       messages : { 
        username: { 
         required: "Please enter a username", 
         minlenght: "Your username must consist at least 2 characters" 
        }, 
        password: { 
         required: "Please enter a password ", 
         minlenght: "Your password must consist at least 5 characters" 
        }, 
        confirm_password: { 
         required: "Please repeat the password", 
         minlenght: "Your password must consist at least 5 characters", 
         equalTo: "This password doesn't match with the original password" 
        }, 
        email: { 
         required: "Please enter a email", 
         email: "Invalid email" 
        } 
       } 
      }); 
     });  


    </script> 
    <style type="text/css"> 
     #commentForm { width: 500px; } 
     #commentForm label { width: 250px; } 
     #commentForm label.error, #commentForm input.submit { margin-left: 253px; } 
     #registerForm { width: 670px; } 
     #registerForm label.error { 
      margin-left: 10px; 
      width: auto; 
      display: inline; 
      color: red; 
     } 
     #newsletter_topics label.error { 
      display: none; 
      margin-left: 103px; 
     } 
     </style> 
</head> 
<body class="zoom: 1;"> 
    <div id="main"> 
    <form id="registerForm" method="post" action="" novalidate="novalidate"> 
     <fieldset> 
      <legend>OLA MUNDO</legend> 
     <p><label for="username">Nome</label> 
     <input id="username" name="username" type="text" value=""></p> 

     <p><label for="email">E-mail</label> 
     <input id="email" name="email" type="email" value=""></p> 

     <p><label for="password">Password</label> 
     <input id="password" name="password" type="password" value=""></p> 

     <p><label for="confirm_password">Confirm Password</label> 
     <input id="confirm_password" name="confirm_password" type="password" value=""></p> 

     <p><input type="submit" class="submit" value="Enviar"></p> 
    </fieldset> 
    </form> 
    </div> 
</fieldset> 
</body> 

Проблема в том, что в моей странице кода не работает, и я не знаю, почему это происходит.

У меня есть файл jquery.js в каталоге моих скриптов, но сценарий не загружен. Итак, я использовал jquery с демонстрационного сайта, я использовал jquery, размещенный в Google, и это не решает проблему. Я не знаю, проблема в коде скрипта, потому что я новичок в javascript.

@Edit

Я решил проблему, но теперь пароль и подтвердить поле пароля не проверяет, почему? код JS правильно

+0

Пробовали ли вы увидеть в консоли браузера, если есть какая-либо ошибка сценария ? – Hariprasad

+0

Я вижу сейчас, и он говорит: ** Неподготовленный SyntaxError: Неожиданный идентификатор ** и я решил! – RebeloX

+0

Спасибо, ребята, решено, Харипрасад и nzn решили проблему – RebeloX

ответ

0

вместо $("registerForm") Вы должны выбрать по идентификатору $("#registerForm")

jquery selectors

+0

Я этого не видел, спасибо это и то, что сказал Харипрасад, решило мою проблему. – RebeloX

1

вы пишете ваши JS, прежде чем DOM застроена. До тех пор браузер не знает, из какого регистра. Таким образом, у вас есть два варианта, либо поместите свой javascript внизу страницы чуть выше тега, либо используйте функцию window.onLoad. Это будет работать ...

0

вы пропустили упомянуть идентификатор селектора $("#registerForm") и сообщения каждого метод упоминает , оператор

JS:

$.validator.setDefaults({ 
      submitHandler: function() { alert("submited!!!"); } 
     }); 

     $().ready(function() { 
      $("#registerForm").validate({ 
       rules : { 
        username: { 
         required: true, 
         minlength: 2 
        }, 
        password: { 
         required: true, 
         minlenght: 5 
        }, 
        confirm_password: { 
         required: true, 
         minlenght: 5, 
         equalTo: "#password" 
        }, 
        email: { 
         required: true, 
         email: true 
        } 
       }, 
       messages : { 
        username: { 
         required: "Please enter a username", 
         minlenght: "Your username must consist at least 2 characters" 
        }, //missed comma 
        password: { 
         required: "Please enter a password ", 
         minlenght: "Your password must consist at least 5 characters" 
        }, //missed comma 
        confirm_password: { 
         required: "Please repeat the password", 
         minlenght: "Your password must consist at least 5 characters", 
         equalTo: "This password doesn't match with the original password" 
        }, //missed comma 
        email: { 
         required: "Please enter a email", 
         email: "Invalid email" 
        } 
       } 
      }); 
     }); 
Смежные вопросы