フロントで入力チェックしたい

Question

Railsでイベント管理システムを作成していて、javaScriptを使用してフロント上で開始時間と終了時間の逆転や
開始時間と終了時間どちらか入力されてないものにバリテーションをかけよう思ってますがうまくいきません。
（後者　両方ともブランクはOKなのでrequireでチェックをかけるのは不可）
jsで検索かけたらformのname名をつけてjsでチェックする方法はあるようですが残念ながらform_withにname名を
つけることはできないと思われます。
いい方法がないか教えて頂きたくお願いします。
該当のview内のフォームです。

<%= form_with(model: @event, url: events_path, local: true, method: :post) do |f| %>
            <tr>
                <th>イベント名</th>
                <td><%= f.name_field :name , class: "form-control", required: true %></td>
              </tr>
            
              <tr>
                <th>開始時間</th>
                <td><%= f.time_field :start_time , class: "form-control" %></td>
              </tr>
              
                <th>終了時間</th>
                <td><%= f.time_field :finish_time , class: "form-control" %></td>
              </tr>
<% end %>

Comments

[m.ts10806]

自身でJavaScriptは書かれてないのでしょうか。nameが無理という根拠が乏しいですがidつければ良いのでは

[Sibutakiti]

確かにidでもとれました。失礼しました。
結局、jQueryでバリテーション組みました
form_with のidをevent_newに設定
ボタンの上に<div id="warning"></div>タグを書いた
勿論、アプリにjQueryインストール済
<script>
$("#event_new").submit('turbolinks:request-start', function() {
var start = $("input[name='event[start_time]']").val();
var finish = $("input[name='student[finish_time]']").val();

if (start > finish) {
$("#warning").text("時間の入力に誤りがあります。確認して再登録お願いします。");
return false;
} else {
$("#event_new").submit();
}
});
</script>

Answer 1

残念ながらform_withにname名を

つけることはできないと思われます。

いえ、最初からnameがついているかと思いますので、それを拾う形にすればいいのではないでしょうか？（もちろん、自分で別途idを振ることも可能です）

Comments

[Sibutakiti]

数件の回答頂いてました。気がつかず申し訳けございません。ありがとうございました。今後ともよろしくお願いします。

Answer 2

nameのついていないinput要素はバリデートしてもしなくても
postされないので意味がない命題だと思います

Comments

[yambejp]

とりあえずHTMLベースで

<script>
window.addEventListener('DOMContentLoaded', ()=>{
const from=document.querySelector('[name=from]');
const to=document.querySelector('[name=to]');
const times=[from,to];
times.forEach(x=>{
x.addEventListener('input',()=>{
var flg=[...times].filter(x=>x.value=="").length<=1;
times.forEach(y=>y.required=flg);
if(x==from) to.setAttribute('min',x.value);
if(x==to) from.setAttribute('max',x.value);
});
});
});
</script>
<form>
from:<input type="time" name="from"><br>
to:<input type="time" name="to"><br>
<input type="submit" value="check">
</form>