我正在尝试按类名验证输入字段,为此使用函数:addClassRules。当我单击输入字段但是在提交时没有接受表单验证时,此验证工作正常。
$(".savedns-button").on("click", function(e) {
$.validator.addClassRules({
content_A: {
required: true,
IP4Checker: true
},
content_AAAA: {
required: true,
IP6Checker: true
}
});
$("#saverecords").validate({
debug: true,
errorElement : 'div',
errorLabelContainer: '.dns-add-error',
});
$("#saverecords").valid();
});
HTML输入
<input type="text" name="content[]" id="content" style="font-size: 14px;" class="form-control pull-left input-sm content_MX" value="10 mail.server.tld">
<input type="text" name="content[]" id="content" style="font-size: 14px;" class="form-control pull-left input-sm content_A" value="8.8.8.8">
这个新版本在选择输入字段时验证,但在提交表单时没有验证。
问题是,我在同一个输入字段上输入了不同类型的输入数据。 所以我们获得了AAAA MX记录等,我用不同的类名识别它们:content_RECORDTYPE。这是我尝试对相同字段中的不同输入使用不同验证的地方。
完整表格
<form method="POST" action="/domeinnaam/dns/save" accept-charset="UTF-8" id="saverecords" class="col-12" style="margin-bottom: 40px;" novalidate="novalidate"><input name="_token" type="hidden" value="t5JbyIe9wcCJIojknpfGtUyGJKRik89AHF4JZ7mv">
<input type="hidden" class="domain_id" name="domain_id" value="">
<input type="hidden" class="domain" name="domain" value="jantjekomtthuis.nl">
<div class="form-panel">
<div class="row form-group" id="17238" data-removedomain="jantjekomtthuis.nl">
<input type="hidden" class="record_id" name="record_id[]" value="17238">
<div class="col-lg-3">
<label class="d-block d-lg-none"><b>Naam</b></label>
<input type="text" name="name[]" id="name" style="font-size: 14px;" class="form-control input-sm valid" value="@" required="" aria-invalid="false">
</div>
<div class="col-lg-2">
<label class="d-block d-lg-none"><b>TTL</b></label>
<select name="expire[]" id="expire" style="font-size: 14px;" class="form-control input-sm valid" required="">
<option value="60">1 min.</option>
<option value="300">5 min.</option>
<option value="3600" selected="">1 uur</option>
<option value="86400">1 dag</option>
<option value="604800">7 dagen</option>
</select>
</div>
<div class="col-lg-2">
<label class="d-block d-lg-none"><b>Type</b></label>
<select name="type[]" id="type" style="font-size: 14px;" class="form-control input-sm" disabled="">
<option value="A">A</option>
<option value="AAAA">AAAA</option>
<option value="CNAME">CNAME</option>
<option value="MX">MX</option>
<option value="TXT">TXT</option>
<option value="SRV" selected="">SRV</option>
</select>
</div>
<div class="col-lg-5" style="padding-right: 55px;">
<label class="d-block d-lg-none"><b>Content</b></label>
<input type="text" name="content[]" id="content" style="font-size: 14px;" class="form-control pull-left required input-sm content_SRV valid" value="100 1 443 sip1.domnain.tkld" required="">
<button class="btn btn-delete pull-right btn-sm delete-record" style="position: absolute; right: 15px;" type="button" onclick="delete_record('17238')">
<svg class="svg-inline--fa fa-plus fa-w-14" aria-hidden="true" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M448 294.2v-76.4c0-13.3-10.7-24-24-24H286.2V56c0-13.3-10.7-24-24-24h-76.4c-13.3 0-24 10.7-24 24v137.8H24c-13.3 0-24 10.7-24 24v76.4c0 13.3 10.7 24 24 24h137.8V456c0 13.3 10.7 24 24 24h76.4c13.3 0 24-10.7 24-24V318.2H424c13.3 0 24-10.7 24-24z"></path></svg><!-- <i class="fas fa-plus"></i> -->
</button>
</div>
</div>
<div class="row form-group" id="17236" data-removedomain="jantjekomtthuis.nl">
<input type="hidden" class="record_id" name="record_id[]" value="17236">
<div class="col-lg-3">
<label class="d-block d-lg-none"><b>Naam</b></label>
<input type="text" name="name[]" id="name" style="font-size: 14px;" class="form-control input-sm" value="@" required="">
</div>
<div class="col-lg-2">
<label class="d-block d-lg-none"><b>TTL</b></label>
<select name="expire[]" id="expire" style="font-size: 14px;" class="form-control input-sm" required="">
<option value="60">1 min.</option>
<option value="300">5 min.</option>
<option value="3600" selected="">1 uur</option>
<option value="86400">1 dag</option>
<option value="604800">7 dagen</option>
</select>
</div>
<div class="col-lg-2">
<label class="d-block d-lg-none"><b>Type</b></label>
<select name="type[]" id="type" style="font-size: 14px;" class="form-control input-sm" disabled="">
<option value="A">A</option>
<option value="AAAA">AAAA</option>
<option value="CNAME">CNAME</option>
<option value="MX" selected="">MX</option>
<option value="TXT">TXT</option>
<option value="SRV">SRV</option>
</select>
</div>
<div class="col-lg-5" style="padding-right: 55px;">
<label class="d-block d-lg-none"><b>Content</b></label>
<input type="text" name="content[]" id="content" style="font-size: 14px;" class="form-control pull-left required input-sm content_MX" value="20 mail.domain.tld" required="">
<button class="btn btn-delete pull-right btn-sm delete-record" style="position: absolute; right: 15px;" type="button" onclick="delete_record('17236')">
<svg class="svg-inline--fa fa-plus fa-w-14" aria-hidden="true" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M448 294.2v-76.4c0-13.3-10.7-24-24-24H286.2V56c0-13.3-10.7-24-24-24h-76.4c-13.3 0-24 10.7-24 24v137.8H24c-13.3 0-24 10.7-24 24v76.4c0 13.3 10.7 24 24 24h137.8V456c0 13.3 10.7 24 24 24h76.4c13.3 0 24-10.7 24-24V318.2H424c13.3 0 24-10.7 24-24z"></path></svg><!-- <i class="fas fa-plus"></i> -->
</button>
</div>
</div>
<div class="row form-group" id="17234" data-removedomain="jantjekomtthuis.nl">
<input type="hidden" class="record_id" name="record_id[]" value="17234">
<div class="col-lg-3">
<label class="d-block d-lg-none"><b>Naam</b></label>
<input type="text" name="name[]" id="name" style="font-size: 14px;" class="form-control input-sm" value="@" required="">
</div>
<div class="col-lg-2">
<label class="d-block d-lg-none"><b>TTL</b></label>
<select name="expire[]" id="expire" style="font-size: 14px;" class="form-control input-sm" required="">
<option value="60">1 min.</option>
<option value="300">5 min.</option>
<option value="3600" selected="">1 uur</option>
<option value="86400">1 dag</option>
<option value="604800">7 dagen</option>
</select>
</div>
<div class="col-lg-2">
<label class="d-block d-lg-none"><b>Type</b></label>
<select name="type[]" id="type" style="font-size: 14px;" class="form-control input-sm" disabled="">
<option value="A">A</option>
<option value="AAAA">AAAA</option>
<option value="CNAME">CNAME</option>
<option value="MX" selected="">MX</option>
<option value="TXT">TXT</option>
<option value="SRV">SRV</option>
</select>
</div>
<div class="col-lg-5" style="padding-right: 55px;">
<label class="d-block d-lg-none"><b>Content</b></label>
<input type="text" name="content[]" id="content" style="font-size: 14px;" class="form-control pull-left required input-sm content_MX" value="20 mail.domain.tld" required="">
<button class="btn btn-delete pull-right btn-sm delete-record" style="position: absolute; right: 15px;" type="button" onclick="delete_record('17234')">
<svg class="svg-inline--fa fa-plus fa-w-14" aria-hidden="true" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M448 294.2v-76.4c0-13.3-10.7-24-24-24H286.2V56c0-13.3-10.7-24-24-24h-76.4c-13.3 0-24 10.7-24 24v137.8H24c-13.3 0-24 10.7-24 24v76.4c0 13.3 10.7 24 24 24h137.8V456c0 13.3 10.7 24 24 24h76.4c13.3 0 24-10.7 24-24V318.2H424c13.3 0 24-10.7 24-24z"></path></svg><!-- <i class="fas fa-plus"></i> -->
</button>
</div>
</div>
<div class="row form-group" id="17229" data-removedomain="jantjekomtthuis.nl">
<input type="hidden" class="record_id" name="record_id[]" value="17229">
<div class="col-lg-3">
<label class="d-block d-lg-none"><b>Naam</b></label>
<input type="text" name="name[]" id="name" style="font-size: 14px;" class="form-control input-sm" value="@" required="">
</div>
<div class="col-lg-2">
<label class="d-block d-lg-none"><b>TTL</b></label>
<select name="expire[]" id="expire" style="font-size: 14px;" class="form-control input-sm" required="">
<option value="60">1 min.</option>
<option value="300">5 min.</option>
<option value="3600" selected="">1 uur</option>
<option value="86400">1 dag</option>
<option value="604800">7 dagen</option>
</select>
</div>
<div class="col-lg-2">
<label class="d-block d-lg-none"><b>Type</b></label>
<select name="type[]" id="type" style="font-size: 14px;" class="form-control input-sm" disabled="">
<option value="A">A</option>
<option value="AAAA">AAAA</option>
<option value="CNAME">CNAME</option>
<option value="MX">MX</option>
<option value="TXT" selected="">TXT</option>
<option value="SRV">SRV</option>
</select>
</div>
<div class="col-lg-5" style="padding-right: 55px;">
<label class="d-block d-lg-none"><b>Content</b></label>
<input type="text" name="content[]" id="content" style="font-size: 14px;" class="form-control pull-left required input-sm content_TXT" value=""v=spf1 a mx ip4:1.1.1.1 ip4:2.2.2.2 ~all"" required="">
<button class="btn btn-delete pull-right btn-sm delete-record" style="position: absolute; right: 15px;" type="button" onclick="delete_record('17229')">
<svg class="svg-inline--fa fa-plus fa-w-14" aria-hidden="true" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M448 294.2v-76.4c0-13.3-10.7-24-24-24H286.2V56c0-13.3-10.7-24-24-24h-76.4c-13.3 0-24 10.7-24 24v137.8H24c-13.3 0-24 10.7-24 24v76.4c0 13.3 10.7 24 24 24h137.8V456c0 13.3 10.7 24 24 24h76.4c13.3 0 24-10.7 24-24V318.2H424c13.3 0 24-10.7 24-24z"></path></svg><!-- <i class="fas fa-plus"></i> -->
</button>
</div>
</div>
<div class="row form-group" id="17226" data-removedomain="jantjekomtthuis.nl">
<input type="hidden" class="record_id" name="record_id[]" value="17226">
<div class="col-lg-3">
<label class="d-block d-lg-none"><b>Naam</b></label>
<input type="text" name="name[]" id="name" style="font-size: 14px;" class="form-control input-sm" value="@" required="">
</div>
<div class="col-lg-2">
<label class="d-block d-lg-none"><b>TTL</b></label>
<select name="expire[]" id="expire" style="font-size: 14px;" class="form-control input-sm" required="">
<option value="60">1 min.</option>
<option value="300">5 min.</option>
<option value="3600" selected="">1 uur</option>
<option value="86400">1 dag</option>
<option value="604800">7 dagen</option>
</select>
</div>
<div class="col-lg-2">
<label class="d-block d-lg-none"><b>Type</b></label>
<select name="type[]" id="type" style="font-size: 14px;" class="form-control input-sm" disabled="">
<option value="A">A</option>
<option value="AAAA">AAAA</option>
<option value="CNAME">CNAME</option>
<option value="MX">MX</option>
<option value="TXT" selected="">TXT</option>
<option value="SRV">SRV</option>
</select>
</div>
<div class="col-lg-5" style="padding-right: 55px;">
<label class="d-block d-lg-none"><b>Content</b></label>
<input type="text" name="content[]" id="content" style="font-size: 14px;" class="form-control pull-left required input-sm content_TXT" value=""v=spf1 a mx ip4:1.1.1.1 ~all"" required="">
<button class="btn btn-delete pull-right btn-sm delete-record" style="position: absolute; right: 15px;" type="button" onclick="delete_record('17226')">
<svg class="svg-inline--fa fa-plus fa-w-14" aria-hidden="true" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M448 294.2v-76.4c0-13.3-10.7-24-24-24H286.2V56c0-13.3-10.7-24-24-24h-76.4c-13.3 0-24 10.7-24 24v137.8H24c-13.3 0-24 10.7-24 24v76.4c0 13.3 10.7 24 24 24h137.8V456c0 13.3 10.7 24 24 24h76.4c13.3 0 24-10.7 24-24V318.2H424c13.3 0 24-10.7 24-24z"></path></svg><!-- <i class="fas fa-plus"></i> -->
</button>
</div>
</div>
<div class="row form-group" id="17202" data-removedomain="jantjekomtthuis.nl">
<input type="hidden" class="record_id" name="record_id[]" value="17202">
<div class="col-lg-3">
<label class="d-block d-lg-none"><b>Naam</b></label>
<input type="text" name="name[]" id="name" style="font-size: 14px;" class="form-control input-sm" value="@" required="">
</div>
<div class="col-lg-2">
<label class="d-block d-lg-none"><b>TTL</b></label>
<select name="expire[]" id="expire" style="font-size: 14px;" class="form-control input-sm" required="">
<option value="60">1 min.</option>
<option value="300">5 min.</option>
<option value="3600" selected="">1 uur</option>
<option value="86400">1 dag</option>
<option value="604800">7 dagen</option>
</select>
</div>
<div class="col-lg-2">
<label class="d-block d-lg-none"><b>Type</b></label>
<select name="type[]" id="type" style="font-size: 14px;" class="form-control input-sm" disabled="">
<option value="A">A</option>
<option value="AAAA">AAAA</option>
<option value="CNAME">CNAME</option>
<option value="MX" selected="">MX</option>
<option value="TXT">TXT</option>
<option value="SRV">SRV</option>
</select>
</div>
<div class="col-lg-5" style="padding-right: 55px;">
<label class="d-block d-lg-none"><b>Content</b></label>
<input type="text" name="content[]" id="content" style="font-size: 14px;" class="form-control pull-left required input-sm content_MX" value="20 mail.domain.tld" required="">
<button class="btn btn-delete pull-right btn-sm delete-record" style="position: absolute; right: 15px;" type="button" onclick="delete_record('17202')">
<svg class="svg-inline--fa fa-plus fa-w-14" aria-hidden="true" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M448 294.2v-76.4c0-13.3-10.7-24-24-24H286.2V56c0-13.3-10.7-24-24-24h-76.4c-13.3 0-24 10.7-24 24v137.8H24c-13.3 0-24 10.7-24 24v76.4c0 13.3 10.7 24 24 24h137.8V456c0 13.3 10.7 24 24 24h76.4c13.3 0 24-10.7 24-24V318.2H424c13.3 0 24-10.7 24-24z"></path></svg><!-- <i class="fas fa-plus"></i> -->
</button>
</div>
</div>
<div class="row form-group" id="17200" data-removedomain="jantjekomtthuis.nl">
<input type="hidden" class="record_id" name="record_id[]" value="17200">
<div class="col-lg-3">
<label class="d-block d-lg-none"><b>Naam</b></label>
<input type="text" name="name[]" id="name" style="font-size: 14px;" class="form-control input-sm" value="@" required="">
</div>
<div class="col-lg-2">
<label class="d-block d-lg-none"><b>TTL</b></label>
<select name="expire[]" id="expire" style="font-size: 14px;" class="form-control input-sm" required="">
<option value="60">1 min.</option>
<option value="300">5 min.</option>
<option value="3600" selected="">1 uur</option>
<option value="86400">1 dag</option>
<option value="604800">7 dagen</option>
</select>
</div>
<div class="col-lg-2">
<label class="d-block d-lg-none"><b>Type</b></label>
<select name="type[]" id="type" style="font-size: 14px;" class="form-control input-sm" disabled="">
<option value="A">A</option>
<option value="AAAA">AAAA</option>
<option value="CNAME">CNAME</option>
<option value="MX" selected="">MX</option>
<option value="TXT">TXT</option>
<option value="SRV">SRV</option>
</select>
</div>
<div class="col-lg-5" style="padding-right: 55px;">
<label class="d-block d-lg-none"><b>Content</b></label>
<input type="text" name="content[]" id="content" style="font-size: 14px;" class="form-control pull-left required input-sm content_MX" value="10 mail.domain.tld" required="">
<button class="btn btn-delete pull-right btn-sm delete-record" style="position: absolute; right: 15px;" type="button" onclick="delete_record('17200')">
<svg class="svg-inline--fa fa-plus fa-w-14" aria-hidden="true" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M448 294.2v-76.4c0-13.3-10.7-24-24-24H286.2V56c0-13.3-10.7-24-24-24h-76.4c-13.3 0-24 10.7-24 24v137.8H24c-13.3 0-24 10.7-24 24v76.4c0 13.3 10.7 24 24 24h137.8V456c0 13.3 10.7 24 24 24h76.4c13.3 0 24-10.7 24-24V318.2H424c13.3 0 24-10.7 24-24z"></path></svg><!-- <i class="fas fa-plus"></i> -->
</button>
</div>
</div>
<div class="row form-group" id="17123" data-removedomain="jantjekomtthuis.nl">
<input type="hidden" class="record_id" name="record_id[]" value="17123">
<div class="col-lg-3">
<label class="d-block d-lg-none"><b>Naam</b></label>
<input type="text" name="name[]" id="name" style="font-size: 14px;" class="form-control input-sm" value="@" required="">
</div>
<div class="col-lg-2">
<label class="d-block d-lg-none"><b>TTL</b></label>
<select name="expire[]" id="expire" style="font-size: 14px;" class="form-control input-sm" required="">
<option value="60">1 min.</option>
<option value="300">5 min.</option>
<option value="3600" selected="">1 uur</option>
<option value="86400">1 dag</option>
<option value="604800">7 dagen</option>
</select>
</div>
<div class="col-lg-2">
<label class="d-block d-lg-none"><b>Type</b></label>
<select name="type[]" id="type" style="font-size: 14px;" class="form-control input-sm" disabled="">
<option value="A" selected="">A</option>
<option value="AAAA">AAAA</option>
<option value="CNAME">CNAME</option>
<option value="MX">MX</option>
<option value="TXT">TXT</option>
<option value="SRV">SRV</option>
</select>
</div>
<div class="col-lg-5" style="padding-right: 55px;">
<label class="d-block d-lg-none"><b>Content</b></label>
<input type="text" name="content[]" id="content" style="font-size: 14px;" class="form-control pull-left required input-sm content_A error" value="8.8.8" required="" aria-describedby="content-error" aria-invalid="true">
<button class="btn btn-delete pull-right btn-sm delete-record" style="position: absolute; right: 15px;" type="button" onclick="delete_record('17123')">
<svg class="svg-inline--fa fa-plus fa-w-14" aria-hidden="true" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M448 294.2v-76.4c0-13.3-10.7-24-24-24H286.2V56c0-13.3-10.7-24-24-24h-76.4c-13.3 0-24 10.7-24 24v137.8H24c-13.3 0-24 10.7-24 24v76.4c0 13.3 10.7 24 24 24h137.8V456c0 13.3 10.7 24 24 24h76.4c13.3 0 24-10.7 24-24V318.2H424c13.3 0 24-10.7 24-24z"></path></svg><!-- <i class="fas fa-plus"></i> -->
</button>
</div>
</div>
<div class="row form-group" id="17121" data-removedomain="jantjekomtthuis.nl">
<input type="hidden" class="record_id" name="record_id[]" value="17121">
<div class="col-lg-3">
<label class="d-block d-lg-none"><b>Naam</b></label>
<input type="text" name="name[]" id="name" style="font-size: 14px;" class="form-control input-sm" value="@" required="">
</div>
<div class="col-lg-2">
<label class="d-block d-lg-none"><b>TTL</b></label>
<select name="expire[]" id="expire" style="font-size: 14px;" class="form-control input-sm" required="">
<option value="60">1 min.</option>
<option value="300">5 min.</option>
<option value="3600" selected="">1 uur</option>
<option value="86400">1 dag</option>
<option value="604800">7 dagen</option>
</select>
</div>
<div class="col-lg-2">
<label class="d-block d-lg-none"><b>Type</b></label>
<select name="type[]" id="type" style="font-size: 14px;" class="form-control input-sm" disabled="">
<option value="A" selected="">A</option>
<option value="AAAA">AAAA</option>
<option value="CNAME">CNAME</option>
<option value="MX">MX</option>
<option value="TXT">TXT</option>
<option value="SRV">SRV</option>
</select>
</div>
<div class="col-lg-5" style="padding-right: 55px;">
<label class="d-block d-lg-none"><b>Content</b></label>
<input type="text" name="content[]" id="content" style="font-size: 14px;" class="form-control pull-left required input-sm content_A error" value="8" required="" aria-describedby="content-error" aria-invalid="true">
<button class="btn btn-delete pull-right btn-sm delete-record" style="position: absolute; right: 15px;" type="button" onclick="delete_record('17121')">
<svg class="svg-inline--fa fa-plus fa-w-14" aria-hidden="true" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M448 294.2v-76.4c0-13.3-10.7-24-24-24H286.2V56c0-13.3-10.7-24-24-24h-76.4c-13.3 0-24 10.7-24 24v137.8H24c-13.3 0-24 10.7-24 24v76.4c0 13.3 10.7 24 24 24h137.8V456c0 13.3 10.7 24 24 24h76.4c13.3 0 24-10.7 24-24V318.2H424c13.3 0 24-10.7 24-24z"></path></svg><!-- <i class="fas fa-plus"></i> -->
</button>
</div>
</div>
<div class="col" style="margin-bottom: 40px; right: -15px;">
<button type="submit" class="btn btn-groen pull-right savedns-button" style="margin-left: 10px;">Opslaan</button>
<button type="button" class="btn btn-danger pull-right disabled">Reset</button>
</div>
<!--</div>-->
</div>
</form>
&#13;
Greatings