javascript - 单击 "update"后，检查与正在编辑的帖子对应的单选按钮，如果存在验证错误

Question

我有一个 View ，它在每个单选按钮中显示与数据库中存在的每个帖子相对应的帖子名称。下面还有一个用于创建新帖子的单选按钮“创建新帖子”。

当单击与现有帖子相对应的单选按钮时，表单字段将填充该帖子信息。单击单选按钮“创建新帖子”时，表单字段将变为空，以便用户可以引入信息来创建新帖子。

如果用户选择单选按钮“创建帖子”并填写表单字段并单击“创建”，并且他错误地填写了某些字段，例如日期格式不正确，则这些字段不会被清除，因此用户不需要再次介绍一下他们。这工作得很好。

问题:但是，当用户选择与现有帖子相对应的某个单选按钮时，表单字段将使用 JS 填充数据库中的帖子存储信息。如果用户更改表单的某些信息，例如日期字段，并引入格式不正确的日期，则会出现错误，但“创建帖子”单选按钮会被选中，因此用户不会继续在他将编辑所选帖子的上下文更改为创建新帖子的上下文，因为单选按钮“创建新帖子”被选中。

你知道如何解决这个问题吗？

包含每个帖子单选按钮和“创建新帖子”单选按钮以及其他表单字段的表单:

 <form id="editposts" method="post" 
      action="{{route('posts.update', ['post_id' => $post->id])}}" enctype="multipart/form-data">
  {{csrf_field()}}
  <div>
    @foreach($posts as $post)
    <div class="form-check">
      <input class="form-check-input radio" type="radio" name="radiobutton" value="{{ $post->id }}" id="{{$post->id}}">
      <label class="form-check-label">
        {{$post->title}}
      </label>
    </div>
    @endforeach
  </div>
  <div class="form-check">
    <input checked class="form-check-input" type="radio" name="radiobutton" id="create_post"
           value="create_post">
    <label class="form-check-label">
      Create post
    </label>
  </div>

  <!-- form fields, here is the name but are more like description, etc -->
  <div class="form-group">
    <label>Post title</label>
    <input  type="text" required class="form-control" value="{{ old('title') }}" name="title" id="tile">
  </div>
  <input type="submit" id="poststore" value="Create"/>
  <input type="submit" id="postupdate" value="Update"/>
</form>

JS 根据所选帖子填充表单字段并根据所选单选按钮更改表单操作:

var posts = {!!  $post !!}
$("#postupdate").hide();
$("input[name='radiobutton']").click(function() {
  let id = $(this).attr("id");
  if (id == "create_post") {
    $("#postupdate").hide();
    $("#poststore").show();
    $("#editposts").attr('action', '{{route('posts.store', ['post_id' => $post->id])}}');
    $("input[name='title']").val("");
    ...
  } else {
    $("#postupdate").show();
    $("#poststore").hide();
    $("#editposts").attr('action', '{{route('posts.update', ['post_id' => $post->id])}}');
    let data = posts.find(e => e.id == id) || {
      title: "",
      ...

    };
      $("input[name='title']").val(data.title);
      ...
    }
    }); 

Answer 1

您可以在错误提交后使用 name='radiobutton' 检查旧输入的值，如果该值与帖子 ID 匹配，则将其标记为已检查，在如果旧的单选按钮值为 create_post，则检查创建新帖子单选按钮。

您可以阅读有关 old inputs 的更多信息来自 Laravel 官方文档。

像这样:

 <form id="editposts" method="post" 
      action="{{route('posts.update', ['post_id' => $post->id])}}" enctype="multipart/form-data">
  {{csrf_field()}}
  <div>
    @foreach($posts as $post)
    <div class="form-check">
      <input {{ (old('radiobutton') && old('radiobutton') == $post->id) ? 'checked' : '' }} class="form-check-input radio" type="radio" name="radiobutton" value="{{ $post->id }}" id="{{$post->id}}">
      <label class="form-check-label">
        {{$post->title}}
      </label>
    </div>
    @endforeach
  </div>
  <div class="form-check">
    <input {{ (old('radiobutton') && old('radiobutton') == 'create_post') ? 'checked' : '' }} class="form-check-input" type="radio" name="radiobutton" id="create_post"
           value="create_post">
    <label class="form-check-label">
      Create post
    </label>
  </div>

  <!-- form fields, here is the name but are more like description, etc -->
  <div class="form-group">
    <label>Post title</label>
    <input  type="text" required class="form-control" value="{{ old('title') }}" name="title" id="tile">
  </div>
  <input type="submit" id="poststore" value="Create"/>
  <input type="submit" id="postupdate" value="Update"/>
</form>