2015-11-03 2 views
1

Так что я работаю над проверкой формы с помощью бутстрапа, но когда я нажимаю кнопку отправки, мои предупреждения не появляются.Почему не работает мой javascript?

У меня пока нет всех предупреждений.

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE-edge"> 
     <meta name="Viewport" content="width=device-width, initial-scale=1"> 

      <!--jquery--> 
      <script src="https://code.jquery.com/jquery-latest.min.js">  </script> 
      <!--ajax--> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
      <!-- Latest compiled and minified CSS --> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

      <!-- Optional theme --> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 

      <!-- Latest compiled and minified JavaScript --> 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

      <script type="text/javascript" src="index.js"></script> 


</head> 
<body> 
    <div class="container"> 
     <div class="panel panel-default"> 
      <div class="panel-heading">My Form</div> 
      <div class="panel-body"> 
       <form id="myForm" method="POST" class="form-horizontal" action="form.php"> 
        <div class="form-group"> 
         <label class="col-md-2 control-label" for="first-name">First Name</label> 
         <div class="col-md-4"> 
          <input type="text" class="form-control" id="first-name" name="first-name" placeholder="First Name"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label class="col-md-2 control-label" for="lastName">Last Name</label> 
         <div class="col-md-4"> 
          <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label class="col-md-2 control-label" for="email">Email</label> 
         <div class="col-md-4"> 
          <input type="email" class="form-control" id="email" name="email" placeholder="Email"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label class="col-md-2 control-label" for="telephone">Telephone</label> 
         <div class="col-md-4"> 
          <input type="text" class="form-control" id="telephone" name="telephone" placeholder="Telephone"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label class="col-md-2 control-label" for="city">City</label> 
         <div class="col-md-4"> 
          <input type="text" class="form-control" id="city" name="city" placeholder="City"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label class="col-md-2 control-label" for="zip">Zip Code</label> 
         <div class="col-md-4"> 
          <input type="text" class="form-control" id="zip" name="zip" placeholder="Zip"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label class="col-md-2 control-label" for="state">State</label> 
         <div class="col-md-4"> 
          <select class="form-control" id="state" name="state"> 
           <option value="">Choose One</option> 
           <option value="1">New Jersey</option> 
           <option value="2">New York</option> 
          </select> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-md-6 col-md-offset-2"> 
          <button type="submit" class="btn btn-success">Submit</button> 
         </div> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</body> 

ли я что-то не так? Или кто-нибудь знает, как заставить его работать?

$(document).ready(function(){ 

$('#myform').submit(function(e){ 
    var firstName = $('#first-name').val(); 
    var pattern = /^$/; 
    var lastName = $('#lastName').val(); 
    var telephone = /^$/; 
    var zipCode = /^$/; 
    var state = $('#state').val(); 
    var error = ''; 
    var emailPattern = /^[A-Za-z0-9.-][email protected][A-Za-z0-9]+\.[A-Za-z]{2,4}$/; 
    var email = $('#email').val(); 

    if(pattern.test(firstName)){ 
     error = 'Error: enter first name.\n'; 
    } 
    if(pattern.test(lastName)){ 
     error = 'Error: enter last name.\n'; 
    } 
    if(pattern.test(state)){ 
     error += 'Error: choose state.\n'; 
    } 

    if(!emailPattern.test(email)){ 
     error += 'Errpr: Enter a valid email.\n'; 
    } 

    if(error.length != 0){ 
     alert(error); 
     e.preventDefault(); 
    } 


});  
}); 
+0

ли код обернут '$ (документ) .ready ({/ * введите здесь свой код * /}); '? – jpaljasma

+0

да есть. По какой-то причине он был отключен, когда я положил его сюда. – Guy

+0

Кроме того, вы загружаете разные версии jQuery. Вы должны удалить jQuery.latest, так как это более устаревшая версия. –

ответ

4

Простой опечатка

id="myForm" !== "#myform" 

так

$('#myForm').submit(function(e){ 
    ^

Также сообщение об ошибке для фамилии должно быть +=

+0

Ничего себе, я не могу поверить, что сделал это, спасибо! – Guy

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