尝试实现 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)
我正在使用 Materializecss 和 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>
这可能是因为您在创建之前尝试获取
#bookingForm
。
将您的脚本标记移动到 HTML 页面的底部,它就会正常工作。
问题是复选框没有名称属性..
也许对你来说已经晚了,但也许可以帮助其他人。我遇到了同样的问题,删除“required”属性解决了它。