如何检查 HTML 表单验证是否通过并触发事件答案

【问题标题】：How to check if HTML form validation passed and trigger event如何检查 HTML 表单验证是否通过并触发事件
【发布时间】：2015-10-08 19:48:08
【问题描述】：

我有一个带有 HTML 验证电话号码的表单。我需要能够验证输入是否有效，并且只有当它有效时才能触发 mixpanel 事件。我可以验证输入，但无法确定输入是否经过验证并触发事件。

HTML

<form class=contact method=get action="/" accept-charset="UTF-8" id="form">
<input type="tel" class="text phoneNumber" name="tel" placeholder="Phone number" required>
<input type=submit class="submit appended" value=submit>
</div>

jQuery

$(".submit").click(function () {
//check if form validation passed
if ($(".phoneNumber") == true) {
    //if passed, trigger mixpanel event
}
});

JSFIDDLE：LINK

【问题讨论】：

给你：github.com/yairEO/validator
你不应该使用点击这里 - 你可以通过点击回车提交表单 - 不点击按钮，最好使用表单的提交事件：$（'form.contact'）。 on('submit',function() {... 你的验证码在这里 });
不会提交无效的form，因此不会触发submit 事件。就像@axel.michel 所说，您应该将submit 事件绑定到form，这将解决您的问题顺便说一句jsfiddle.net/yjpe0mmc/1
基于本次更新，如何查看html输入校验是否通过且有效？jsfiddle.net/mattography/yjpe0mmc/2
@Matt 如果您使用的是插件，请发布有问题的参考！否则，您对最后一个 jsfiddle 的质疑没有意义，因为无效的 form 不会触发 submit 事件

标签： jquery html forms validation

【解决方案1】：

您可以采用两种方法....来自@axel.michel 的精彩评论。如果您使用表单的submit 事件而不是提交按钮的click 事件，则提交事件仅在表单有效时触发：

$('form.contact').on('submit', function(e) {
    //FORM IS VALID 
    //stop default form submission so you can do stuff
    e.preventDefault();
    //do stuff
    //submit form if desired
    this.submit();
});

$('form.contact').on('submit', function(e) {
    e.preventDefault();
    console.log( $('.phoneNumber')[0].checkValidity() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class=contact method=get action="/" accept-charset="UTF-8" id="form">
<input type="tel" class="text phoneNumber" name="tel" placeholder="Phone number" required>
  
<input type=submit class="submit appended" value=submit>
</div>

第二种方法，如果您只想检查输入元素是否有效，请添加一个按钮来执行此操作：

$('.button').on('click', function() {
    console.log( $('.phoneNumber')[0].checkValidity() );
});

$('.button').on('click', function() {
    console.log( $('.phoneNumber')[0].checkValidity() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class=contact method=get action="/" accept-charset="UTF-8" id="form">
<input type="tel" class="text phoneNumber" name="tel" placeholder="Phone number" required>
<button type="button" class="button">Check Validity</button>  
<input type=submit class="submit appended" value=submit>
</div>

【讨论】：