如何观察HTML 5表单是否准备好提交?

Question

使用这样简单的表单，如何观察是否可以提交？

<form action="/action_page.php">
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
<input type="submit">
</form>

我的意思是，如果某些输入使用pattern和/或required，如何知道整个表单是否可以提交？

我找到了特定输入的oninvalid属性。是否可以在<form>元素上使用onvalid？

Answer 1

你可以做这样的事情：

<form action="/action_page.php" onsubmit="submit()">
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" placeholder="Three letter country code"><br /><br />
<input type="submit" value="load">
</form>
<script type='text/javascript'>
fuction submit(){
//get the value of the input 
var code = document.getElementById('country_code').value;
//use a regular expression
var expression  = [A-Za-z]{3};
if(!expression.test(code)){
//when returning false the form will not be sent 
return false;
}
else{
//when returning true the form will be sent 
return true;
}
}
</script>

您可以为所有字段执行此操作，尽管有更多方法可以为您服务