jQuery验证显示未接收的类型错误

Question

尝试实现jQuery验证，因为我需要能够验证隐藏的输入。

我准备就绪文档中的插件初始化，但是在提交时，我会收到以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'type')
    at a.validator.elementValue (jquery.validate.min.js:4:10471)
    at a.validator.check (jquery.validate.min.js:4:11074)
    at a.validator.checkForm (jquery.validate.min.js:4:7116)
    at a.validator.form (jquery.validate.min.js:4:6816)
    at HTMLFormElement.<anonymous> (jquery.validate.min.js:4:1146)
    at HTMLFormElement.dispatch (vendors.min.js:1:391918)
    at HTMLFormElement.f.handle (vendors.min.js:1:389932)

如果相关，我正在使用posticalizecss和laravel 8。该表格以单击时触发的模态为单位，但为了进行测试，我始终显示它。这是我初始化插件的方式：

    $(document).ready(function() {
        $("#bookingForm").validate();
    });

这是形式：

         <form class="col s12 m12 l12" id="bookingForm" role="form">
            <div class="modal-content" id="modalContent">
                <h4>{{ $post->name }}</h4>
                <h6 class="" style="font-size: 14px;margin-top: 0px;">{{ $post->organizer->name }}</h6> 
                <div class="row center"> 
                    <div class="row center">
                        <div class="input-field col s12 m6 l2 offset-l4">
                            <select id="city_ids" name="city_ids" class="browser-default">
                                <option value="">Plats</option>
                                @foreach($post->cities as $city)
                                    <option value="{{ $city->id }}">{{ $city->name }}, {{ $city->county->name }}</option>
                                @endforeach                                
                            </select>
                        </div>             
                        <div class="input-field col s12 m6 l2">
                            <select id="time_ids" name="time_ids" class="browser-default">
                                <option value="">Tillfälle</option>
                                @foreach($post->bookingTimes as $bookingTime)
                                    <option value="{{ $bookingTime->id }}">{{ $bookingTime->bookingDateTime }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>  
                    <div class="row">
                        <div class="col s12 m6 l1 offset-l5 pb-1">
                        <label>
                            <input type="checkbox" />
                            <span>Boka för Företag</span>
                        </label>
                        </div>
                    </div>   
                    <div class="row">
                        <h5 class="studiecentralen-pink-title-NU">Fyll i deltagarens uppgifter</h5>
                    </div>      
                    <div class="row">
                        <div class="input-field col s12 m6 l2 offset-l5">
                            <input placeholder="  Namn" autocomplete="off" spellcheck="false" data-error=".errorTxt3" id="name" name="name" type="text" class="validate search-term main-search studiecentralen-bg" required/>
                        </div>
                    </div> 
                    <div class="row">
                        <div class="input-field col s12 m6 l2 offset-l5">
                            <input placeholder="  Gatuadress" autocomplete="off" spellcheck="false" data-error=".errorTxt3" id="address" name="address" type="text" class="validate search-term main-search studiecentralen-bg" required/>
                        </div>
                    </div>  
                    <div class="row">
                        <div class="input-field col s12 m6 l2 offset-l5">
                            <input placeholder="  C/O" autocomplete="off" spellcheck="false" data-error=".errorTxt3" id="careoff" name="careoff" type="text" class="search-term main-search studiecentralen-bg"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="input-field col s12 m6 l2 offset-l5">
                            <input placeholder="  Postnummer" autocomplete="off" spellcheck="false" data-error=".errorTxt3" id="zip" name="zip" type="text" class="validate search-term main-search studiecentralen-bg" required/>
                        </div>
                    </div> 
                    <div class="row">
                        <div class="input-field col s12 m6 l2 offset-l5">
                            <input placeholder="  Ort" autocomplete="off" spellcheck="false" data-error=".errorTxt3" id="city" name="city" type="text" class="validate search-term main-search studiecentralen-bg" required/>
                        </div>
                    </div>   
                    <div class="row">
                        <div class="input-field col s12 m6 l2 offset-l5">
                            <input placeholder="  Epost" autocomplete="off" spellcheck="false" data-error=".errorTxt3" id="email" name="email" type="text" class="validate search-term main-search studiecentralen-bg" required/>
                        </div>
                    </div> 
                    <div class="row">
                        <div class="input-field col s12 m6 l2 offset-l5">
                            <input placeholder="  Telefonnummer" autocomplete="off" spellcheck="false" data-error=".errorTxt3" id="phone" name="phone" type="text" class="validate search-term main-search studiecentralen-bg" required/>
                        </div>
                    </div>               
                    <div class="extraParticipants"></div>
                    <div class="row center">
                        <div class="col s12 m6 l2 offset-l5">
                            <p id="noMore" style="display:none;">Vill du lägga in fler deltagare kan du göra en till bokning eller skriva i meddelandefältet.</p>
                            <button id="addParticipant" type="button" style="border-radius: 50px;height:30px;padding: 1px 10px;display: inline-flex;align-items: center;" class="modal-action btn buttonShadow center">Lägg till en deltagare</button>
                        </div>                        
                    </div>                 
                    <div class="row">
                        <div class="input-field col s12 m6 l2 offset-l5">
                            <textarea id="inquiry" name="inquiry" class="studiecentralen-textarea studiecentralen-bg materialize-textarea validate" placeholder="   Har du något att tillägga?"></textarea>
                        </div>
                    </div>  
                    <div class="row">
                        <div class="col s12 m6 l2 offset-l5 pb-1">
                        <label>
                            <input type="checkbox" required/>
                            <span>Jag samtycker till att studiecentralen sparar min information och förmedlar informationen till arrangör av bokad utbildning</span>
                        </label>
                        </div>
                    </div>
                    <div class="row center"> 
                    <button type="submit" style="border-radius: 50px;height:30px;padding: 1px 10px;display: inline-flex;align-items: center;" class="modal-action btn buttonShadow center">Skicka</button>
                </div>         
                </div> 
            </div>           
        </form>

Answer 1

好吧，问题是复选框没有名称属性。

Answer 2

这可能是因为您正在尝试在创建它之前获得#bookingform。
将您的脚本标签移至HTML页面的底部，并且它将正常工作。

Answer 3

也许对您来说很晚，但也许可以帮助他人。我遇到了相同的问题，并删除了解决该问题的“必需”属性。

Answer 4

复选框没有名称。添加名称属性。它将验证