2013-10-15 3 views
0

Я хочу использовать jquery на этой странице. когда я нажимаю на болт, ничего не происходит, не могли бы вы мне помочь? Я думаю, что это мой сценарий самозакрывающиеся теги ... Вот мой код:проблемы с проверкой jquery - dreamweaver cs.3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Module Health Measurements</title> 

<script src="../../LocalSites/Unnamed Site 2/jquery.js"></script> 

<script> 
$.validator.setDefaults({submitHandler: function() alert("submitted!"); 
}}); 
$().ready.(function() 
    $(".selector").validate({rules: { 
      40: { 
      required : true, 
      minlenght : 2, 
      maxlenght : 3 }, 
      41: { 
      required : true, 
      minlenght : 2, 
      maxlenght : 3 }, 
      42: { 
      required : true, 
      minlenght : 2, 
      maxlenght : 3 }, 
      43: { 
      required : true, 
      minlenght : 2, 
      maxlenght : 3 }, 
      44: { 
      required : true, 
      minlenght : 2, 
      maxlenght : 3 }, 
      45: { 
      required : true }, 
      46: { 
      required : true }, 
      47: { 
      required : true }, 
      48: { 
      required : true }, 
      49: { 
      required : true }, 
      50: { 
      required : true }, 
      51: { 
      required : true }, 
      52: { 
      required : true }, 
      } , 

      messages: { 
      40: { 
       required : This field is required, 
       minlenght : No less than 2 characters, 
       maxlenght : no more than 3 characters }, 
      41: { 
       required : This field is required, 
       minlenght : No less than 2 characters, 
       maxlenght : no more than 3 characters }, 
      42: { 
       required : This field is required, 
       minlenght : No less than 2 characters, 
       maxlenght : no more than 3 characters }, 
      43:{ 
       required : This field is required, 
       minlenght : No less than 2 characters, 
       maxlenght : no more than 3 characters }, 
      44: { 
       required : A selection is required }, 
      45: { 
       required : This field is required }, 
      46: { 
       required : This field is required }, 
      47: { 
       required : This field is required }, 
      48: { 
       required : This field is required }, 
      49: { 
       required : This field is required }, 
      50: { 
       required : This field is required }, 
      51: { 
       required : This field is required }, 
      52: { 
       required : This field is required }, 
       }}) 
</script> 

<style type="text/css"> 
#form1{ width:400px;} 
</style> 

</head> 
<body> 

<form id="form1" name="form1" method="post" action=""> 

<table width="800" border="1"> 
    <tr> 
    <td colspan="2" bgcolor="#5ACDC7">Health Measurements</td> 
    </tr> 
    <tr> 
    <td width="636">Height in cm without shoes</td> 
    <td width="148"><label> 
     <input name="40" type="text" id="40" size="7" maxlength="7" /> 
    </label></td> 
    </tr> 
    <tr> 
    <td>Weight in kg without shoes</td> 
    <td><label> 
     <input name="41" type="text" id="41" size="7" maxlength="7" /> 
    </label></td> 
    </tr> 
    <tr> 
    <td>Hip circumference in cm</td> 
    <td><label> 
     <input name="42" type="text" id="42" size="7" maxlength="7" /> 
    </label></td> 
    </tr> 
    <tr> 
    <td>Waist circumference in cm</td> 
    <td><label> 
     <input name="43" type="text" id="43" size="7" maxlength="7" /> 
    </label></td> 
    </tr> 
    <tr> 
    <td>Have you eaten in the last 7 hours?</td> 
    <td><label> 
     <select name="44" size="1" id="44"> 
     </select> 
    </label></td> 
    </tr> 
    <tr> 
    <td>Systolic blood pressure mmHg</td> 
    <td><label> 
     <input name="45" type="text" id="45" size="7" maxlength="7" /> 
    </label></td> 
    </tr> 
    <tr> 
    <td>Diastolic blood pressure mmHg</td> 
    <td><label> 
     <input name="46" type="text" id="46" size="7" maxlength="7" /> 
    </label></td> 
    </tr> 
    <tr> 
    <td>Glucose mmol/l</td> 
    <td><label> 
     <input name="47" type="text" id="47" size="7" maxlength="7" /> 
    </label></td> 
    </tr> 
    <tr> 
    <td>Total Cholesterol mmol/l</td> 
    <td><label> 
     <input name="48" type="text" id="48" size="7" maxlength="7" /> 
    </label></td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td colspan="2" bgcolor="#5ACDC7">BP 5 Minute Follow-up</td> 
    </tr> 
    <tr> 
    <td>Systolic blood pressure 5 min</td> 
    <td><label> 
     <input name="51" type="text" id="51" size="7" maxlength="7" /> 
    </label></td> 
    </tr> 
    <tr> 
    <td>Diastolic blood pressure 5 min</td> 
    <td><label> 
     <input name="52" type="text" id="52" size="7" maxlength="7" /> 
    </label></td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td><label> 
     <input type="submit" name="button1" id="button1" value="Submit" /> 
    </label></td> 
    <td>&nbsp;</td> 
    </tr> 
</table> 

</form> 

</body> 
</html> 

Я сделал некоторые исследования о JQuery, но это первый раз, когда я на самом деле использовать JQuery на веб-сайте. Ваша помощь будет действительно оценена.

Thanx

+0

У вас есть некоторые ошибки в коде. Посмотрите мой ответ, чтобы исправить их, а также добавить необходимые плагины. –

ответ

1

Вы должны включить любую версию jquery validation plugin

И ваш SCRIPT является недействительные

  1. Его $ (документ) .ready (функция() { не $(). Ready. (Функция()
  2. Использование MinLength, MaxLength не minlenght, maxlenght
  3. Validation сообщения являются Строки не переменные, имеющие пространства
  4. Используйте $ ("# form1"). Проверки ({ не $ (".Селекторный"). проверки ({

Попробуйте

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Module Health Measurements</title> 
<script src="../../LocalSites/Unnamed Site 2/jquery.js"></script> 
<!-- Adding the validation plugin by CDN --> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> 
<script> 
    $.validator.setDefaults({submitHandler: function() { alert("submitted!");}}); 
    $(document).ready(function() { 
     $("#form1").validate({ 
      rules: { 
       40: {required : true,minlength : 2,maxlength : 3 }, 
       41: {required : true,minlength : 2,maxlength : 3 }, 
       42: {required : true,minlength : 2,maxlength : 3 }, 
       43: {required : true,minlength : 2,maxlength : 3 }, 
       44: {required : true,minlength : 2,maxlength : 3 }, 
       45: {required : true }, 
       46: {required : true }, 
       47: {required : true }, 
       48: {required : true }, 
       49: {required : true }, 
       50: {required : true }, 
       51: {required : true }, 
       52: {required : true }, 
      } , 
      messages: { 
       40: {required : 'This field is required',minlength : 'No less than 2 characters', 
       maxlength : 'no more than 3 characters' }, 
       41: {required : 'This field is required',minlength : 'No less than 2 characters', 
       maxlength :' no more than 3 characters' }, 
       42: {required : 'This field is required',minlength : 'No less than 2 characters', 
       maxlength : 'no more than 3 characters' }, 
       43:{required :' This field is required',minlength :' No less than 2 characters', 
       maxlength : 'no more than 3 characters' }, 
       44: {required : 'A selection is required' }, 
       45: {required : 'This field is required' }, 
       46: {required : 'This field is required' }, 
       47: {required : 'This field is required' }, 
       48: {required : 'This field is required' }, 
       49: {required : 'This field is required' }, 
       50: {required : 'This field is required' }, 
       51: {required : 'This field is required' }, 
       52: {required :' This field is required' }, 
      } 
     }); 
    }); 
</script> 

Reference

Working Fiddle

0

Вы должны включить плагины проверки как http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js

Для получения более подробной информации смотрите в http://jqueryvalidation.org/

попробуйте добавить

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script> 

в головной секции

У вас есть много ошибок в коде.

Чтобы получить четкое представление о том, как использовать JQuery валидации изучить этот код

<html> 
    <head> 

    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"> 
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js">   </script> 

    <link href="runnable.css" rel="stylesheet" /> 
    <!-- Load jQuery and the validate plugin --> 
    <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> 

    <!-- jQuery Form Validation code --> 
    <script> 

    // When the browser is ready... 
    $(function() { 

    // Setup form validation on the #register-form element 
    $("#register-form").validate({ 

    // Specify the validation rules 
    rules: { 
     firstname: "required", 
     lastname: "required", 
     email: { 
      required: true, 
      email: true 
     }, 
     password: { 
      required: true, 
      minlength: 5 
     }, 
     agree: "required" 
    }, 

    // Specify the validation error messages 
    messages: { 
     firstname: "Please enter your first name", 
     lastname: "Please enter your last name", 
     password: { 
      required: "Please provide a password", 
      minlength: "Your password must be at least 5 characters long" 
     }, 
     email: "Please enter a valid email address", 
     agree: "Please accept our policy" 
    }, 

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

    }); 

    </script> 
</head> 
<body> 
    <h1>Register here</h1> 

    <!-- The form that will be parsed by jQuery before submit --> 
    <form action="" method="post" id="register-form" novalidate="novalidate"> 

    <div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br /> 
    <div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><br /> 
    <div class="label">Email</div><input type="text" id="email" name="email" /><br /> 
    <div class="label">Password</div><input type="password" id="password" name="password" /><br /> 
    <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div> 

    </form> 

</body> 
</html> 
+0

. Отправьте мне ссылку на таблицу стилей Runnable.css –

+0

или напишите мне по электронной почте [email protected] –

Смежные вопросы