2015-09-21 4 views
7

Non so perché ho ricevuto questo errore quando ho cambiato il codice in php (da html). quando l'estensione del file è HTML, il codice sta lavorando beneImpossibile leggere la proprietà "impostazioni" di undefined quando faccio clic sul pulsante Invia

<?php?> 
<html lang="en"> 
<head> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

     <!-- Latest compiled and minified CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

     <link rel="stylesheet" href="css/manual.css"> 
     <!-- Optional theme --> 

     <!-- Latest compiled and minified JavaScript --> 
     <script src="http://code.jquery.com/jquery-latest.min.js" 
     type="text/javascript"></script> 


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

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

     <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script> 
     <title>Register</title> 
</head> 

<body> 

     <nav class="navbar navbar-default" id="navBar"> 

     </nav> 

     <div class="full"> 
       <div class="col-xs-12"> 
         <!--Side Bar--> 
         <div class="col-xs-3" id="navSide"> 
         </div> 

         <div class="col-xs-6" id="signUpForm"> 

           <h1>Register Page</h1> 
           <form role="form" id="signUpForm"> 
             <div class="form-group"> 
               <div class="form-inline spacer-12"> 
                 <input type="text" class="form-control" name="userFirstname" placeholder="First Name"> 
                 <input type="text" class="form-control" name="userLastName" placeholder="Last Name"> 

               </div> 
             </div> 

             <div class="form-group ">  

               <input type="text" class="form-control" 
               name="userEmail" 
               placeholder="Email"> 
             </div> 

             <div class="form-group "> 
               <input type="password" class="form-control" name="userPassword" placeholder="Password"> 
             </div> 

             <div class="form-group "> 
               <input type="password" class="form-control" name="confirmPassword" placeholder="Password"> 
             </div> 

             <div class="form-group "> 
                <label> Birthday* </label> 
                <input type="date" class="form-control" name="userBirthday" placeholder="Birthday"> 

             </div> 
             <input type="submit" class="btn btn-info spacer-12" style="clear:both" > 


           </form> 



         </div> 
       </div> 
     </div> 


     <script src="js/startup.js"></script> 
     <script src="js/signup.js"></script> 

</body> 
</html> 

<?php?> 

allora questo è il mio codice di validazione jquery

$(document).ready(function(){ 
    $('#signUpForm').validate({ 
     errorElement: "span", 
     errorClass: "help-block", 
     rules:{ 
      userFirstName:{ 
       required: true 
      }, 
      userLastName:{ 
       required: true 
      }, 
      userEmail:{ 
       required: true 
      }, 
      userPassword:{ 
       required: true 
      }, 
      confirmPassword:{ 
       required: true 
      }, 
      userBirthday:{ 
       required: true 
      } 
     }, 
     submitHandler: function (form) { // for demo 
      alert('valid form submitted'); // for demo 
      return false; // for demo 
     }, 
     highlight: function(element) { 

     $(element).closest('.form-group').addClass('has-error').addClass('red-border'); 
     }, 
     unhighlight: function(element) { 
     $(element).closest('.form-group').removeClass('has-error').addClass('has-success').removeClass('red-border'); 
     } 
    }); 
}); 

Questo codice causa di errore quando si fa clic sul pulsante di invio (JQuery Convalida Uncaught TypeError: Impossibile leggere la proprietà 'settings' di undefined) Ma l'errore è temporaneo e svanirà in un istante.

risposta

16

Hai definito due ID con lo stesso nome, mentre l'ID dovrebbe essere univoco.

<div class="col-xs-6" id="signUpForm"> 
<form role="form" id="signUpForm"> 

tenta di rimuovere id da <div class="col-xs-6" id="signUpForm">

+1

che stupido errore, come si controlla se ci sono 2 identificativi nella stessa forma? –

+1

usando il selettore 'id' come così' console.log ($ ('[id = "signUpForm"]'). Length); ' –

+0

okay grazie norli..i accetterò la tua risposta presto, è ancora difficile se abbiamo bisogno per verificare tutti gli id ​​uno per uno haha ​​ –

1

NOTA due cose

1. Definire la funzione Jquery

includono la funzione di jQuery!

(function($) { 

// Avviare Script

// endscript/

})(jQuery); 
  1. modificare l'ID modulo perché sta facendo conflitto tra Modulo Id ID e Div

<form role="form" id="signUpForm1"> // include 1 in previous form id

e mettere questo id nello script

$('#signUpForm1').validate({ // put the Id in the script 

auguriamo che il vostro compito sarà successo.

1

Per aggiungere un piccolo dettaglio qui, mi sono imbattuto nello stesso problema con il selettore di tempo dell'interfaccia utente jQuery, ed era anche dovuto all'id essere non univoco.

Nel mio caso, è perché stavo afferrando l'elemento genitore da un modello - duplicandolo per una finestra pop-up. Di conseguenza, il contenuto della finestra aveva tutti gli ID duplicati.

mia soluzione normale che doveva sostituire questo:

$('#foo').bar(); 

con questo:

myPopupWindow.find('#foo').bar(); 

che funziona abbastanza bene per la maggior parte delle cose, ma non per il tempo raccoglitrice.Per quello, finii per fare questo:

myPopupWindow.find('#foo').attr('id', 'foo_' + someUniqueTag); 
myPopupWindow.find('#foo_' + someUniqueTag).timepicker(); 

dove someUniqueTag è un ID di record, di numeri casuali o qualche altra stringa distinti. Questo l'ha risolto abbastanza bene per me.

Problemi correlati