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

Question

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

超文本标记语言

<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：链接

Answer 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) {
    //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() );
});

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

$('.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>
  
<input type=submit class="submit appended" value=submit>
</div>

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