web-dev-qa-db-ja.com

送信ボタンをクリックすると、未定義のプロパティ「設定」を読み取ることができません

コードをphpから（htmlから）に変更したときにこのエラーを受け取りました。ファイルの拡張子がhtmlの場合、コードは正常に動作しています

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

これは私の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');
       }
   });
});

このコードは、送信ボタンをクリックするとエラーが発生します（JQuery Validate Uncaught TypeError：undefinedのプロパティ 'settings'を読み取れません）しかし、エラーは一時的なものであり、しばらくすると消えます。

javascriptphpjqueryhtml
16
Robert Limanto

同じ名前で2つのIDを定義しましたが、IDは一意でなければなりません。

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

<div class="col-xs-6" id="signUpForm">からIDを削除してください

31
Norlihazmey Ghazali

OPの質問には当てはまりませんが、このエラーは、フォームではない要素を検証しようとした場合にも発生する可能性があります。

3
user5493187

ここに小さな詳細を追加するために、jQuery UIタイムピッカーで同じ問題に遭遇しました。これは、IDが一意ではないためでもありました。

私の場合、テンプレートから親要素を取得し、ポップアップウィンドウ用に複製するためです。その結果、ウィンドウのコンテンツはすべて重複したIDを持ちました。

そのための私の通常の回避策はこれを置き換えることでした：

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

これとともに：

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

これはほとんどの場合にうまく機能しますが、タイムピッカーには適していません。そのために、私はこれをやった：

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

someUniqueTagは、レコードID、乱数、またはその他の明確な文字列です。これは私にとって非常にうまく解決しました。

2
Jacob Ewing

2つのことに注意してください

1。 Jquery関数を定義します

jQueryの機能を含める！

(function( $ ) {

//スクリプトの開始

// endscript /

})( jQuery );
  1. フォームIdとDiv Idの間で競合が発生しているため、フォームIDを変更します

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

このidをスクリプトに追加

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

タスクが成功することを願っています。

2
CodeLove

Rules（）メソッドを使用する場合は、最初に検証を初期化してください。

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