Question

我有一个问题是在输入周围清除HTML5 oninvalid red border。如果用户在没有正确填写表单的情况下单击提交按钮，则会显示HTML5 setCustomValidity错误，并且任何所有必需的输入字段都会显示默认的红色轮廓，这些字段保留为空白...这一切都很有效。问题是，如果用户单击后退按钮，然后返回此表单或此表单中表单的其他部分，表单仍将显示所有带有红色轮廓的无效表单元素。

我想要发生的事情，如果这形成了＆＃34;回去＆＃34;单击按钮，将重置/清除表单，以便重置所有表单元素，除非表单再次提交并且表单信息为空/错误，否则不会显示红色轮廓。

以下是我的代码片段：

public function store($user_id)
{
    Project::create([
        'user_id ' => $user_id,
        'name' => request('name'),
        'description' => request('description'),


    ]);


    return back();
}

我搜索了几天试图弄清楚如何解决这个问题。我试过了：

<form class="login-form" aria-label="Login" action="" method="post">
  <div class="login-A">
    <h4>Are you a client?</h4>
    <div>
       <button class="lx-button lx-button--small lx-button--primary" id="client-yes" type=button>
         Yes
       </button>
       <button class="lx-button lx-button--small lx-button--primary" id="client-no" type=button>
         No
       </button>
     </div>
   </div>
   <div class="login-B">
      <h4>Existing client information</h4>
      <button class="lx-button lx-button--small lx-button--tertiary back" id="olb-back-btn-2" type=button>
         Go back
      </button>
      <p>Enter your online ID and Password</p>
      <div>
        <div>
           <label for="olb-user-id">User ID</label>
           <input id="olb-user-id" name="olbuserid" maxlength="20" type="text" required="required" oninvalid="setCustomValidity('User ID is required.')" oninput="setCustomValidity('')">
        </div>
        <div>
           <label for="olb-password">Password</label>
           <input id="olb-password" name="olbpassword" maxlength="28" value="" type="password" required="required" oninvalid="setCustomValidity('Password is required.')" oninput="setCustomValidity('')">
        </div>
      </div>
      <button class="lx-button lx-button--small lx-button--primary" id="login-button" type=submit>
         Continue
      </button>
   </div><!-- login-B -->
   <div class="login-C">
       <h4 class="text">New client</h4>
       <button class="lx-button lx-button--small lx-button--tertiary back" id="olb-back-btn-3" type=button>
          Go back
       </button>
       <label for="login-state">Select your state to view your account options.</label>
       <div class="login-state-container">
           <select id="login-state" name="login-state" required="required" oninvalid="setCustomValidity('State is required.')" oninput="setCustomValidity('')">
               <option value="" selected="selected">State</option>
               <option value="AL">AL</option>
               <option value="FL">FL</option>
               <option value="GA">GA</option>
               <option value="IN">IN</option>
               <option value="WV">WV</option>
               <option value="DC">Washington, DC</option>
           </select>
       </div>
    </div>
</form>

也尝试过：

function clearValidity(){
    document.getElementById('olb-user-id').setCustomValidity('');
    document.getElementById('olb-password').setCustomValidity('');
    document.getElementById('login-state').setCustomValidity('');
}

document.getElementById( 'olb-back-btn-2' ).onclick = function()  {clearValidity()};
document.getElementById( 'olb-back-btn-3' ).onclick = function()  {clearValidity()};

除了帖子中的许多其他试验，我已阅读但似乎没有任何效果。请帮忙！谢谢！

Answer 1

后退按钮保存最后一页的结束方式。唯一的方法是更改表单以使用Javascript发布数据。

使用javascript收集数据和HttpXML发布

首先使用JavaScript收集数据
然后使用javascript清除所有字段
使用javascript和HttpXML请求发布数据
返回时（xml repsonse）重定向（如果需要）或显示错误，以便他们重新填写表单（表单现在将为空白并准备重新开始）

如果使用此方法，请务必禁用提交按钮，直到从XML帖子返回响应以停止用户多次提交

单击“返回”按钮时如何重置HTML5表单验证错误

1 个答案: