只有在所有输入都有效的情况下，我才需要执行代码（发送ajax表单）。
我现在使用的代码是:
jQuery('.btn-save').on("click", function() {
var submit = true;
jQuery(this).closest('tr').find('input:invalid').each(function () {
jQuery(this).addClass('error');
submit = false;
});
if (submit) {
jQuery.ajax({ // ... do the job });
}
});
我想知道是否有一种更优雅的方法来实现这一点，而不涉及创建submit变量。
我尝试在每个循环中使用return，但它从循环返回，而不是从父onclick事件返回。
在find之后，您可能不需要eace。 jquery（this）。closest（“tr”）。find（“input:invalid”）将返回jquery对象的数组。 检查长度是否为0。 当为0时，表示没有输入:无效。 然后进行ajax调用。 否则，您可以直接使用addClass，而无需迭代find的结果
jQuery('.btn-save').on("click", function() {
const errInputs = jQuery(this).closest('tr').find('input:invalid');
if (errInputs.length === 0) {
// ajax code here
} else {
errInputs.addClass('error');
}
});
这对你有用吗？
null
$('.btn-save').on("click", function() {
$(this).closest('tr').find('input:invalid').each(function () {
jQuery(this).addClass('error');
});
if ($(this).closest('tr').find('input:invalid').length > 0) {
jQuery.ajax({ // ... do the job });
}
});
使用https://jqueryvalidation.org/怎么样？
https://jqueryvalidation.org/files/demo/
它变得像在输入上指定属性和调用validate（）一样简单:
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
<script>
$("#commentForm").validate();
</script>
