Trying to implement jquery validation because I need to be able to validate hidden inputs.

I initialize the plugin in document ready but on submit, I receive the following error:

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)

I'm using Materializecss and laravel 8, if its relevant. The form is in a modal that is triggered on click but for the sake of testing, I'm always showing it right now. Here is the way I initialize the plugin:

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

And here is the form:

         <form  id="bookingForm" role="form">
            <div  id="modalContent">
                <h4>{{ $post->name }}</h4>
                <h6  style="font-size: 14px;margin-top: 0px;">{{ $post->organizer->name }}</h6> 
                <div > 
                    <div >
                        <div >
                            <select id="city_ids" name="city_ids" >
                                <option value="">Plats</option>
                                @foreach($post->cities as $city)
                                    <option value="{{ $city->id }}">{{ $city->name }}, {{ $city->county->name }}</option>
                                @endforeach                                
                            </select>
                        </div>             
                        <div >
                            <select id="time_ids" name="time_ids" >
                                <option value="">Tillfälle</option>
                                @foreach($post->bookingTimes as $bookingTime)
                                    <option value="{{ $bookingTime->id }}">{{ $bookingTime->bookingDateTime }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>  
                    <div >
                        <div >
                        <label>
                            <input type="checkbox" />
                            <span>Boka för Företag</span>
                        </label>
                        </div>
                    </div>   
                    <div >
                        <h5 >Fyll i deltagarens uppgifter</h5>
                    </div>      
                    <div >
                        <div >
                            <input placeholder="  Namn" autocomplete="off" spellcheck="false" data-error=".errorTxt3" id="name" name="name" type="text"  required/>
                        </div>
                    </div> 
                    <div >
                        <div >
                            <input placeholder="  Gatuadress" autocomplete="off" spellcheck="false" data-error=".errorTxt3" id="address" name="address" type="text"  required/>
                        </div>
                    </div>  
                    <div >
                        <div >
                            <input placeholder="  C/O" autocomplete="off" spellcheck="false" data-error=".errorTxt3" id="careoff" name="careoff" type="text" />
                        </div>
                    </div>
                    <div >
                        <div >
                            <input placeholder="  Postnummer" autocomplete="off" spellcheck="false" data-error=".errorTxt3" id="zip" name="zip" type="text"  required/>
                        </div>
                    </div> 
                    <div >
                        <div >
                            <input placeholder="  Ort" autocomplete="off" spellcheck="false" data-error=".errorTxt3" id="city" name="city" type="text"  required/>
                        </div>
                    </div>   
                    <div >
                        <div >
                            <input placeholder="  Epost" autocomplete="off" spellcheck="false" data-error=".errorTxt3" id="email" name="email" type="text"  required/>
                        </div>
                    </div> 
                    <div >
                        <div >
                            <input placeholder="  Telefonnummer" autocomplete="off" spellcheck="false" data-error=".errorTxt3" id="phone" name="phone" type="text"  required/>
                        </div>
                    </div>               
                    <div ></div>
                    <div >
                        <div >
                            <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;" >Lägg till en deltagare</button>
                        </div>                        
                    </div>                 
                    <div >
                        <div >
                            <textarea id="inquiry" name="inquiry"  placeholder="   Har du något att tillägga?"></textarea>
                        </div>
                    </div>  
                    <div >
                        <div >
                        <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 > 
                    <button type="submit" style="border-radius: 50px;height:30px;padding: 1px 10px;display: inline-flex;align-items: center;" >Skicka</button>
                </div>         
                </div> 
            </div>           
        </form>

CodePudding user response：

Its probably because you are trying get #bookingForm before its created. move you script tag to bottom of your HTML page and its gonna work properly.

CodePudding user response：

Well the issue was that the checkboxes didn't have a name attribute..