Javascript 重置HTML5验证

前言：我一直在寻找解决方案，但我认为这可能只是一个我自己的问题，所以我不确定

我正在尝试在表单上使用HTML5验证进行客户端验证。我在字段上也有自定义验证错误消息

我遇到的问题是，当用户单击表单上的submit时，验证失败，然后用户更正该问题；验证仍然失败

即使用户更正了表单中的问题，我也无法通过验证

表格

<%= form_for(@booking) do |f| %>
  <%= f.hidden_field :client_id, value: current_user.id %>
  <%= f.hidden_field :talent_id, value: @profile.user.id %>
  <div style='margin-left:auto; margin-right:auto; padding:1em'>
    <div>
      <p class='large-title upcase'>Assign Proposal to Production</p>
    </div>
    <div class='col-md-12'>
      <%= select_tag :production_title,options_for_select(current_user.productions.map {|p| [p.title]}.uniq),{class: 'standard-text-field', prompt: "Choose Existing Production"} %>
    </div>
    <p>or</p>
    <div class='col-md-12'>
      <%= text_field_tag :new_production_title,nil, {class: 'standard-text-field', placeholder:"Create a New Production", maxlength: 45} %>
    </div>
    <div>
      <hr style='margin-top:6.5em;'>
    </div>
    <div class='col-md-12'>
      <%= select_tag :booking_templates, options_for_select(current_user.sent_bookings.where(template: true).map {|p| [p.job_title]}.uniq),{class: 'standard-text-field', prompt: "Choose Booking Template"} %>
    </div>
    <p>or create a new booking</p>
    <div>
      <p class='large-title upcase'>Job Details</p>
    </div>
    <div class='col-md-12'>
      <%= f.text_field :job_title, { class: 'standard-text-field', placeholder:"Job Title", required: true, oninvalid: "this.setCustomValidity('Please enter a job title')" } %>
    </div>
    <div class='col-md-4'>
      <%= f.text_field :d_start, { class: 'standard-text-field', required: true, oninvalid: "this.setCustomValidity('Please select a date')" } %>
    </div>
    <div class='col-md-4'>
      <%= f.text_field :d_end, { class: 'standard-text-field', required: true, oninvalid: "this.setCustomValidity('Please select a date')"} %>
    </div>
    <div class='col-md-4'>
      <%= text_field :shown_amount,nil, {class: 'standard-text-field', id: 'shown-amount', placeholder:"Total Amount (USD)", required: true, oninvalid: "this.setCustomValidity('Please enter a valid amount')", style: 'text-align:right'} %>
      <%= f.hidden_field :amount, id: 'booking_amount' %>
    </div>
    <div>
      <p class='large-title upcase'>Choose all that apply</p>
    </div>
    <div class='col-md-12'>
      <%= f.text_area :job_description, class: 'standard-text-field standard-large-text-field', placeholder:"Job Description", required: true, oninvalid: "this.setCustomValidity('Please enter a brief description')" %>
    </div>
    <div>
      <%= f.submit "Request to Book", class: 'modal-submit-button upcase', id: 'send-request' %>
    </div>
  </div>
<% end %>

将提案分配给生产部门
或


或者创建一个新的预订

作业详细信息

选择所有适用的选项

我的思考过程是，如果验证没有通过，应该有某种方法可以重置验证，但不确定。任何帮助都将不胜感激