web-dev-qa-db-fra.com

Impossible de lire la propriété 'paramètres' de non définie lorsque je clique sur le bouton Envoyer

Je ne sais pas pourquoi j'ai reçu cette erreur quand j'ai changé le code en php (de html). lorsque l'extension du fichier est html, le code fonctionne correctement 

<?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?>

alors c'est mon code de validation 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');
       }
   });
});

Ce code provoque une erreur lorsque je clique sur le bouton d'envoi (JQuery Valide Uncaught TypeError: Impossible de lire la propriété 'paramètres' de non définie).

javascriptphpjqueryhtml
14
Robert Limanto

Vous avez défini deux identifiants avec le même nom, alors que identifiant doit être unique.

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

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

27
Norlihazmey Ghazali

Bien que ce ne soit pas le cas dans la question de OP, cette erreur peut également être provoquée en essayant de valider un élément qui n'est pas une forme.

3
user5493187

Pour ajouter un petit détail ici, j'ai rencontré le même problème avec le sélecteur de temps de jQuery UI, et c'était également dû au fait que l'ID était non unique.

Dans mon cas, c'est parce que je récupérais l'élément parent d'un modèle, en le dupliquant pour une fenêtre contextuelle. En conséquence, le contenu de la fenêtre avait tous des identifiants en double.

Ma solution de contournement normale pour cela était de remplacer ceci:

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

avec ça:

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

Cela fonctionne assez bien pour la plupart des choses, mais pas pour le sélecteur de temps. Pour celui-là, j'ai fini par faire ceci:

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

oùUniqueTag est un identifiant d'enregistrement, un nombre aléatoire ou une autre chaîne distincte. Cela l'a résolu assez bien pour moi.

2
Jacob Ewing

NOTE deux choses

1. Définir la fonction Jquery

inclure la fonction de jQuery!

(function( $ ) {

// Démarrer le script

// endcript/

})( jQuery );
  1. Changer l'ID de formulaire parce qu'il y a un conflit entre Id de formulaire et ID de div

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

Et met cet identifiant dans le script

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

J'espère que votre tâche sera couronnée de succès.

2
CodeLove