[英]Prevent validation on form.reset()
I have the following html form: 我有以下HTML表单:
<body>
<div>
<form id="callBackForm" class="custom eight form" method="post" enctype="multipart/form-data" action="thank-you.php">
<div class="callBackFormDivs">
<div style="padding:0;" class="four mobile-one columns">
<label for="name" class="left inline">Name</label>
</div>
<div class="eight mobile-three columns">
<input class="left" id="name" name="name" required type="text" />
</div>
</div>
<div class="callBackFormDivs">
<div style="padding:0;" class="four mobile-one columns">
<label for="Age" class="left inline">Age</label>
</div>
<div class="eight mobile-three columns">
<input class="left" id="Age" name="Age" required type="text" />
</div>
</div>
<div class="callBackFormDivs callBackFormButtonContainer">
<div>
<input type="submit" value="Submit" alt="Submit">
<button class="button" style="font-weight:normal; height:34px; float:right;" onClick="fnClearForm()">RESET</button>
</div>
</div>
</form>
</div>
</body>
Note that the fields have a required attribute set on them. 请注意,在字段上设置了必填属性。 This attribute displays an error message to the user if they try to submit the form without entering any text. 如果用户尝试提交表单而不输入任何文本,则此属性向用户显示错误消息。
There is a reset button on the page, which clears the fields, using the form.reset()
function, as follows: 页面上有一个重置按钮,它使用form.reset()
函数清除字段,如下所示:
function fnClearForm()
{
document.getElementById('callBackForm').reset();
}
The problem is, that when the form resets, it causes the validation to fire, and displays the error message to the user. 问题是,当表单重置时,它将导致验证触发,并向用户显示错误消息。
How do I prevent this? 我该如何预防?
I know I can write a custom validator, which will solve this, but I think it is best to find a way to make this validation work properly. 我知道我可以编写一个自定义验证器来解决此问题,但是我认为最好找到一种使此验证正常工作的方法。
I did find some related question, but none of them solved the issue. 我确实找到了一些相关的问题,但是没有一个人解决了这个问题。
Use the html attribute type
to create a reset button. 使用html属性type
创建一个重置按钮。
<button type="reset" value="Reset">Reset</button>
http://www.w3schools.com/tags/att_button_type.asp http://www.w3schools.com/tags/att_button_type.asp
Fiddle: https://jsfiddle.net/2t2Lhnb8/ 小提琴: https : //jsfiddle.net/2t2Lhnb8/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.