我正在使用一个动态表和表单,我创建了一个小的验证表单我的表单和动态表验证..它的工作但是如果表单无效它的提交..不需要那个.. 只想在表单有效时只提交表单。否则限制要显示的错误消息..比如“这个字段是必需的”
在这里 fiddle ..
我的示例代码在这里..
$(document).ready(function() {
$('#contactForm').validate({
rules: {
acctcode: {
required: true
},
accountName: {
required: true
},
narr: {
required: true
},
debit: {
required: true
},
billtype: {
required: true
},
cashactcode: {
required: true
}
},
submitHandler: function(form) {
alert('valid form');
return false;
}
});
$('#cashSub').on('click', function() {
$('#contactForm').valid();
});
});
$(document).ready(function() {
$("#add_Row").on("click", function() {
var counter = 0;
var idVal = $('#tab_logic tr:last').find('td:first').html();
var matches = idVal.match(/\d+/g);
if (matches != null) {
counter = Number(matches) + counter + 1;
}
var newRow = $("<tr>");
var cols = "";
cols += '<td><select class="form-control sel_sel status" id="accountName' + counter + '" name="accountName" required><option>Select cash account</option><option value="1">TDS A/c 1</option><option value="2">TDS A/c 2</option><option value="3">TDS A/c 3</option></select></td>'
cols += '<td><input type="text" class="form-control required price" name="narr" placeholder="Enter your text here" id="acc_narrat' + counter + '" data-toggle="modal" data-target="#narratModal" onchange="unname(this.id, this.value)"/></td>';
cols += '<td><button type="button" class="adRow ibtnDel" style="width:70%;">x</button></a></td>';
newRow.append(cols);
var defVal = $("select[name=acctname]").find(":selected").val();
if (defVal) {
$("select[name=accountName]").find(`option[value=${defVal}]`).hide();
}
$("table.order-list").append(newRow);
setValCashVal('accountName'.concat(counter));
bindScript();
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function(_event) {
$(this).closest("tr").remove();
evaluateTotal();
});
});
/* Apend value to all row */
$("#ok_button").on('click', function() {
let val = $("#cash_text").val();
$("#pay_narrat, #acc_narrat").val(val);
});
.load {
border-color: black;
background-color: plum !important;
}
.load:hover {
background-color: blue
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<form id="contactForm">
<input type="button" class="add_Row adRow" id="add_Row" value="Add Row">
<table class="table table-bordered table-hover order-list" id="tab_logic" style="width:60% !important">
<tbody>
<tr id="fst_row">
<td>
<select class="form-control sel_sel" id="payacc" name="actname" for="actname">
<option value="">Select TDS A/c name</option>
<option value="1">TDS A/c 1</option>
<option value="2">TDS A/c 2</option>
<option value="3">TDS A/c 3</option>
</select>
</td>
<td>
<input type="text" class="form-control required" id="pay_narrat" name="narr" for="narr" data-toggle="modal" data-target="#narratModal" placeholder="Enter your text here" />
</td>
</tr>
</tbody>
</table>
<!-- narrtion modal -->
<div class="modal fade" id="narratModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title modal_head" id="myModalLabel">Narration</h4>
</div>
<div class="modal-body">
<label class="modal_note">Note: Only alphabets A-Z a-z number 0-9 and characters % [] () - _ . , are allowed in text</label>
<textarea id="cash_text" class="cash_text" maxlength="200">Enter Here...</textarea>
<span class="modal_valid">0/200 Characterts entered</span>
</div>
<div class="modal-footer narr_footer">
<button id="ok_button" type="button" class="btn btn-primary cashmodal_btn" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</form>
<!-- submit -->
<div class="form-group col-4 vocSub" style="margin-bottom: 0px !important;">
<div class="col-md-12 cashform_submit" id="">
<input type="submit" class="btn add-btn submit-btn load cashmainBtn" id="cashSub" th:value="Submit" tabindex="1" value="Submit" />
</div>
</div>
最佳答案
提交表单有两种方式。在表单中包含“提交”按钮或从 jQuery 代码动态提交 for。
在您的情况下,第一个问题是每当您使用 Add Row
按钮动态添加新字段时,它不会将验证规则应用于动态添加的字段。您需要像我在 fiddle 中应用的那样动态应用规则。
仅供引用
$('input.narr').each(function() {
$(this).rules("add",
{
required: true
})
});
我暂时禁用了通过单击文本字段打开的模式。请引用 fiddle ,如有任何问题请告诉我。
$(document).ready(function() {
$('#contactForm').validate({
rules: {
acctcode: {
required: true
},
accountName: {
required: true
},
narr: {
required: true
},
debit: {
required: true
},
billtype: {
required: true
},
cashactcode: {
required: true
}
}
});
});
$(document).ready(function() {
var counter = 0;
$("#add_Row").on("click", function() {
var idVal = $('#tab_logic tr:last').find('td:first').html();
var matches = idVal.match(/\d+/g);
var newRow = $("<tr>");
var cols = "";
cols += '<td><select class="form-control sel_sel status" id="accountName' + counter + '" name="accountName" required><option>Select cash account</option><option value="1">TDS A/c 1</option><option value="2">TDS A/c 2</option><option value="3">TDS A/c 3</option></select></td>'
cols += '<td><input type="text" class="narr form-control required" name="narr'+ counter + '" placeholder="Enter your text here" id="acc_narrat' + counter + '" /></td>';
cols += '<td><button type="button" class="adRow ibtnDel" style="width:70%;">x</button></a></td>';
newRow.append(cols);
var defVal = $("select[name=acctname]").find(":selected").val();
if (defVal) {
$("select[name=accountName]").find(`option[value=${defVal}]`).hide();
}
$("table.order-list").append(newRow);
counter++;
});
$('#contactForm').on('submit', function(event) {
console.log($('.narr'))
$('.narr').each(function() {
$(this).rules("add",
{
required: true
})
});
event.preventDefault();
if($('#contactForm').validate().form()) {
alert("validates");
} else {
alert("does not validate");
}
});
$('#contactForm').validate();
});
.load {
border-color: black;
background-color: plum !important;
}
.load:hover {
background-color: blue
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js" crossorigin="anonymous"></script>
<form id="contactForm" method="get" action="">
<input type="button" class="add_Row adRow" id="add_Row" value="Add Row">
<table class="table table-bordered table-hover order-list" id="tab_logic" style="width:60% !important">
<tbody>
<tr id="fst_row">
<td>
<select class="form-control sel_sel" id="payacc" name="actname" for="actname">
<option value="">Select TDS A/c name</option>
<option value="1">TDS A/c 1</option>
<option value="2">TDS A/c 2</option>
<option value="3">TDS A/c 3</option>
</select>
</td>
<td>
<input type="text" class="form-control required" id="pay_narrat" name="narr" placeholder="Enter your text here" />
</td>
</tr>
</tbody>
</table>
<!-- submit -->
<div class="form-group col-4 vocSub" style="margin-bottom: 0px !important;">
<div class="col-md-12 cashform_submit" id="">
<input type="submit" class="btn add-btn submit-btn load cashmainBtn" id="cashSub" th:value="Submit" tabindex="1" value="Submit" />
</form>
</div>
</div>
关于javascript - 如何使用 jQuery 在表单无效时验证和限制提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58877609/