在laravel-octbercms中重新设置表单时，如何删除验证器创建的验证消息

Question

表单验证：

组件

public function onContact()
{
$input = post();
//$contact = Contact::create($input);
$rules = [
'name' => 'required|alpha',
'designation' => 'required',
'note' => 'required',
'contactNo' => 'required|numeric|max:10',
'emailIdText' => 'required|email',
'companyName' => 'required'
];
$validator = Validator::make($input, $rules);

if ($validator->fails()) {
throw new ValidationException($validator);
} else {

$contact = new Contact;
$contact->name = $input['name'];
$contact->designation = $input['designation'];
$contact->note = $input['note'];
$contact->inquiry_about = $input['option'];
$contact->email_id = $input['emailIdText'];
$contact->contact_no = $input['contactNo'];
$contact->company_name = $input['companyName'];
$contact->save();
}
}

default.htm

<form id="myform" autocomplete="off" action="{{ 'contactUs'|page }} "
data-request="{{ __SELF__ }}::onContact"  data-request-validate data-request-flash
method="post" name="myform" class="contact-form">
<table height="" cellpadding="0" cellspacing="15" class="contactUs">
<tbody>
<tr >
<td class="Fieldname" >Inquiry About : </td>
<td valign="top" >
<select class="comboFieldontact" name="option" id="option" >
<option value="Existing Client" selected>Existing Client</option>
<option value="Prospect">Prospect</option>
<option value="Media">Media</option>
<option value="Investor">Investor</option>
<option value="Association">Association</option>
<option value="Career">Career</option>
</select>
<span class="Error"  data-validate-for="inquiry_about" id="optionTextError" ></span>
</td>
</tr>
<tr>
<td valign="top" class="Fieldname">Name :</td>
<td valign="top">
<input type="text" id="name" name="name" class="textFieldContact">
<span class="Error" data-validate-for="name" id="nameTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Email : </td>
<td valign="top">
<input type="text" id="contactemailIdText" name="emailIdText" class="textFieldContact" >
<span class="Error" data-validate-for="emailIdText" id="contactemailIdTextError" ></span></td>

</tr>
<tr>
<td valign="top" class="Fieldname">Contact No :
</td>
<td valign="top">
<input type="text" maxlength="15" id="contactNo" name="contactNo" class="textFieldContact"
>
<span class="Error" data-validate-for="contactNo" id="contactNoTextError" ></span></td>

</tr>
<tr>
<td valign="top" class="Fieldname">Company Name :</td>
<td valign="top">
<input type="text" id="companyName" name="companyName" class="textFieldContact"
>
<span class="Error" data-validate-for="companyName" id="companyNameTextError" ></span></td>

</tr>
<tr>
<td valign="top" class="Fieldname">Designation :</td>
<td valign="top">
<input type="text" id="designation" name="designation" class="textFieldContact" >
<span class="Error" data-validate-for="designation" id="designationTextError" ></span></td>
</tr>
<tr>
<td class="Fieldname"> Note :</td>
<td valign="top">
<textarea class="textarea" name="note" id="note" style="color: #000;" ></textarea>
<span class="Error" data-validate-for="note" id="fromTextError" ></span></td>
</tr>
<tr>
<td class="Fieldname"></td>
<td valign="top">
<input type="submit" class="contactBtn" value="Submit" >
<input type="reset" id="resetbtn" class="contactBtn" value="Reset">
</td>
</tr>
</tbody>
</table>
</form>

表单验证非常好，但我想重置表单以及验证错误消息，我该怎么做？

当点击重置按钮时，输入字段中的输入会重置，但错误消息仍显示。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。我该怎么做

Answer 1

在这里，使用此JavaScript代码清除所有具有错误类的标记。

<script>
function clearErrors() {
var form = document.getElementById('myform').querySelectorAll('span.Error');
for (i=0; i<=form.length; i++) {
form[i].innerText = '';
}
}
</script>
<form id="myform" autocomplete="off" action="{{ 'contactUs'|page }} "
data-request="{{ __SELF__ }}::onContact"  data-request-validate data-request-flash
method="post" name="myform" class="contact-form">
<table height="" cellpadding="0" cellspacing="15" class="contactUs">
<tbody>
<tr >
<td class="Fieldname" >Inquiry About : </td>
<td valign="top" >
<select class="comboFieldontact" name="option" id="option" >
<option value="Existing Client" selected>Existing Client</option>
<option value="Prospect">Prospect</option>
<option value="Media">Media</option>
<option value="Investor">Investor</option>
<option value="Association">Association</option>
<option value="Career">Career</option>
</select>
<span class="Error"  data-validate-for="inquiry_about" id="optionTextError" ></span>
</td>
</tr>
<tr>
<td valign="top" class="Fieldname">Name :</td>
<td valign="top">
<input type="text" id="name" name="name" class="textFieldContact">
<span class="Error" data-validate-for="name" id="nameTextError" ></span></td>
</tr>
<tr>
<td valign="top" class="Fieldname">Email : </td>
<td valign="top">
<input type="text" id="contactemailIdText" name="emailIdText" class="textFieldContact" >
<span class="Error" data-validate-for="emailIdText" id="contactemailIdTextError" ></span></td>

</tr>
<tr>
<td valign="top" class="Fieldname">Contact No :
</td>
<td valign="top">
<input type="text" maxlength="15" id="contactNo" name="contactNo" class="textFieldContact"
>
<span class="Error" data-validate-for="contactNo" id="contactNoTextError" ></span></td>

</tr>
<tr>
<td valign="top" class="Fieldname">Company Name :</td>
<td valign="top">
<input type="text" id="companyName" name="companyName" class="textFieldContact"
>
<span class="Error" data-validate-for="companyName" id="companyNameTextError" ></span></td>

</tr>
<tr>
<td valign="top" class="Fieldname">Designation :</td>
<td valign="top">
<input type="text" id="designation" name="designation" class="textFieldContact" >
<span class="Error" data-validate-for="designation" id="designationTextError" ></span></td>
</tr>
<tr>
<td class="Fieldname"> Note :</td>
<td valign="top">
<textarea class="textarea" name="note" id="note" style="color: #000;" ></textarea>
<span class="Error" data-validate-for="note" id="fromTextError" ></span></td>
</tr>
<tr>
<td class="Fieldname"></td>
<td valign="top">
<input type="submit" class="contactBtn" value="Submit" >
<button type="reset" onclick="clearErrors()">Reset</button>
</td>
</tr>
</tbody>
</table>
</form>

Answer 2

您是否试图通过单击重置按钮来用jQuery隐藏类"error"的元素？

另一种方法是用空href更改重置按钮。点击按钮，我想它会刷新页面和表单。