【发布时间】:2016-02-10 16:00:38
【问题描述】:
我有以下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>
请注意,字段上设置了必需的属性。如果用户尝试在不输入任何文本的情况下提交表单,此属性会向用户显示错误消息。
页面上有一个reset按钮,清除字段,使用form.reset()函数,如下:
function fnClearForm()
{
document.getElementById('callBackForm').reset();
}
问题是,当表单重置时,它会触发验证,并向用户显示错误消息。
如何防止这种情况发生?
我知道我可以编写一个自定义验证器,这将解决这个问题,但我认为最好找到一种方法来使此验证正常工作。
我确实找到了一些相关的问题,但没有一个能解决问题。
【问题讨论】:
标签: javascript html input