【发布时间】：2019-09-30 12:41:55
【问题描述】：
我有一个表格，我想要求提供访问者的电话号码或电子邮件地址。 我想要求这个，而表单是一个信息请求表，我想确保我至少有一个反馈渠道 - 让用户选择使用哪个（或两者都可能）。
我在这里被打动了一段时间，在其他非常相似的问题中找不到合适的信息 - 不知何故，这一切都不合适。因此请原谅我重复的问题；我只是看不到我出错的地方。 这是我几乎完整的表格（只删除了我认为好的并且对问题也没有必要的部分）：
<div class="propertydetailrequest form-group">
<input type="text" name="cntnt01fbrp__31" value="" class="form-control" required="" placeholder="Your Name *" id="fbrp__31" />
</div>
<div>
<input type="email" name="cntnt01fbrp__58[]" value="" class="form-control require-one" placeholder="Your Email" id="fbrp__58_1" />
</div>
<div>
<input type="text" name="cntnt01fbrp__33" value="" class="form-control require-one" placeholder="Your Telephone" id="fbrp__33" />
</div>
<div class="required">
<input type="checkbox" class="form-control" name="cntnt01fbrp__56" value="t" required="required" id="fbrp__56" />
<label for="fbrp__56">I read and have accepted the <a href="gdpr.html">privacy policy</a> <span class="red">*</span></label>
</div>
<div>
<script>
// adding script here within the form instead of in a global script file
// using vanilla JS to enable jQuery after it has been loaded before </body>
document.addEventListener('DOMContentLoaded', function () {
$("#cntnt01fbrp_submit").addClass('disabled');
$("#cntnt01fbrp_submit").prop('disabled', true);
$.getScript("http://example.com/assets/js/validate.min.js", function () {
$( "#cntnt01moduleform_1" ).validate({
errorPlacement: function(error,element) {
return true; // just hiding that error message
},
rules: {
fbrp__58_1: {
require_from_group: [1, ".require-one"],
email: true // does validate email addresses and empty is fine too
},
fbrp__33: {
require_from_group: [1, ".require-one"]
}
}
}); // eof validate
}); //eof getscript
// trying to make sending the form without validation impossible
$('#cntnt01moduleform_1 input').on('keyup blur', function () {
if ($('#cntnt01moduleform_1').valid()) {
console.log('validated onBlur'); // make sure the plugin validates and not the browser
$('input#cntnt01fbrp_submit').removeClass('disabled'); $("#cntnt01fbrp_submit").prop('disabled', false);
} else {
$('input#cntnt01fbrp_submit').addClass('disabled'); $("#cntnt01fbrp_submit").prop('disabled', true);
}
});
$('#fbrp__56').change(function() {
if ($('#cntnt01moduleform_1').valid()) {
console.log('validated onClick'); // make sure the plugin validates and not the browser
$('input#cntnt01fbrp_submit').removeClass('disabled'); $("#cntnt01fbrp_submit").prop('disabled', false);
} else {
$('input#cntnt01fbrp_submit').addClass('disabled'); $("#cntnt01fbrp_submit").prop('disabled', true);
}
});
}); // eof dom load
</script>
</div>
<div class="submit text-right">
<input class="btn btn-success" name="cntnt01fbrp_submit" id="cntnt01fbrp_submit" value="Senden" type="submit" />
</div>
</form>
但是，在仅给出名称（HTML 属性要求） 并选中 上的 GDPR 复选框（这也是 HTML 要求） 后，该表单才有效。显然，验证器插件确实验证了表单 - 即使我在选项中询问它是否需要其中一个。 控制台日志稍后会被删除 - 我只是想弄清楚使用这个时会触发哪个事件。
【问题讨论】：
-
关于您的部分称为 “试图在没有验证的情况下发送表单” ~ 它是 JavaScript……用户只需禁用 JavaScript，他就可以为所欲为。其次，为什么要使用自己的
keyup和blur处理程序手动添加和删除类？除了阻止提交之外，这实际上就是验证插件的重点。 -
更新 after 我的问题得到回答，只是为了澄清：我合并了 jquery.validate.min.js 和 additional- methods.min.js 合并到一个文件中以提高网络速度。无论如何我都需要它们，所以我将它们结合起来以节省不必要的往返。
-
@Sparky 该页面无论如何都塞满了 JavaScript。在下一步中，我正在处理后备，例如 是否仍然存在。所以我认为这只是一种支持用户交互和保护有效提交的方式，不是出于故意，而是实际上是无意的。这些类仅提供额外的视觉反馈，并且来自我正在使用的 Bootstrap 框架。
标签： jquery html jquery-validate