wake-up-neo.com

Ich kann die Eigenschaftseinstellungen von undefined nicht lesen, wenn ich auf die Schaltfläche "Senden" klicke

Ich weiß nicht warum Ich habe diese Fehlermeldung erhalten, als ich den Code in PHP (von HTML) geändert habe. wenn die Erweiterung der Datei html ist, funktioniert der Code gut

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

dann ist dies mein jquery-validierungscode

$(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');
       }
   });
}); 

Dieser Code führt zu einem Fehler, wenn ich auf die Schaltfläche zum Senden klicke (JQuery Validate Uncancet TypeError: Die Eigenschaft 'Einstellungen' von undefined kann nicht gelesen werden.).

14
Robert Limanto

Sie haben zwei IDs mit demselben Namen definiert, wobei ID eindeutig sein sollte.

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

Versuchen Sie, die ID aus <div class="col-xs-6" id="signUpForm"> zu entfernen.

27

Obwohl dies in der Frage von OP nicht der Fall ist, kann dieser Fehler auch dadurch verursacht werden, dass versucht wird, ein Element zu überprüfen, das kein Formular ist.

3
user5493187

Um hier ein kleines Detail hinzuzufügen, stieß ich auf das gleiche Problem mit der Zeitauswahl für die jQuery-Benutzeroberfläche, was auch darauf zurückzuführen war, dass die ID nicht eindeutig ist.

In meinem Fall liegt es daran, dass ich das übergeordnete Element aus einer Vorlage herausgeholt habe - es für ein Popup-Fenster dupliziert. Als Ergebnis hatte der Inhalt des Fensters alle doppelte IDs.

Meine normale Problemumgehung dafür war, dies zu ersetzen:

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

mit diesem:

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

Das funktioniert für die meisten Dinge ganz gut, aber nicht für die Zeitauswahl. Für diesen habe ich das getan:

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

dabei ist someUniqueTag eine Datensatz-ID, eine Zufallszahl oder eine andere eindeutige Zeichenfolge. Das hat es für mich ganz gut gelöst.

2
Jacob Ewing

HINWEIS zwei Dinge

1. Definiere die Jquery-Funktion

schließen Sie die Funktion von jQuery ein!

(function( $ ) {

// Skript starten

// endscript/

})( jQuery );
  1. Ändern Sie die Formular-ID, da es einen Konflikt zwischen Formular-ID und Div-ID gibt

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

Und diese ID in ein Skript einfügen

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

Hoffe, dass deine Aufgabe erfolgreich sein wird.

2
CodeLove

Wenn Sie die rules () -Methode verwenden, müssen Sie zuerst die Validierung initialisieren.

var validator = $("#Form1").validate();
$('#field1').rules("add", {
         min: 1
});
0
Michael