在 laravel 中验证错误后,在模态中显示错误消息

Display error message in modal, after validation error in laravel

提问人:kaamrul 提问时间:11/8/2022 最后编辑:SEYED BABAK ASHRAFIkaamrul 更新时间:11/14/2022 访问量:1575

问:

我在更新模式形式中显示错误消息时遇到问题。我正在使用 laravel 请求进行验证和 AJAX 在模态中提交表单。我希望看到每个输入错误的字段的错误消息。但是,我收到此错误:

给定的数据无效

我检查了网络选项卡,在那里看到了错误,但我无法弄清楚为什么这没有显示在我的字段中。

这是我的剧本

function updatePassword(e, t)
{
    e.preventDefault();

    const url    = BASE_URL + '/admin/organizations/operators/updatePassword/' + $(updatePasswordForm).find("input[name='id']").val();
    var form_data = $(t).serialize();    

    // loading('show');
    axios.post(url, form_data)
        .then(response => {
            notify(response.data.message, 'success');
            $(updatePasswordModal).modal('hide');
            // roleTable.ajax.reload()
        })
        .catch(error => {
            const response = error.response;
            if (response) {
                if (response.status === 422)
                    validationForm(updatePasswordForm, response.data.errors);
                else if(response.status === 404)
                    notify('Not found', 'error');
                else
                    notify(response.data.message, 'error');
            }
        })
        .finally(() => {
            // loading('hide');
    });
        
}

这是我的 Blade 文件

<form id="updatePasswordForm" onsubmit="updatePassword(event, this)">
      <input type="hidden" name="id" value="">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel"> {{ __('Update Password') }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <div class="form-group row">
              <label class="col-sm-4 col-form-label required">{{ __('New Password') }}</label>
              <div class="col-sm-8">
                  <div class="row">
                      <div class="col-sm-12">
                          <div class="form-group @error('user.password') error @enderror">
                              <input type="password" class="form-control" id="password"  name="user[password]" placeholder="{{ __('Password') }}" required>
                          </div>
                      </div>
                  </div>
                  @error('user.password')
                    <p class="error-message">{{ $message }}</p>
                  @enderror
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-4 col-form-label required">{{ __('Confirm Password') }}</label>
              <div class="col-sm-8">
                  <div class="row">
                      <div class="col-sm-12">
                          <div class="form-group @error('user.password_confirmation') error @enderror">
                              <input type="password" class="form-control" id="confirmPassword" name="user[password_confirmation]" placeholder="{{ __('Confirm Password') }}">
                          </div>
                      </div>
                  </div>
                  @error('user.password_confirmation')
                    <p class="error-message">{{ $message }}</p>
                  @enderror
              </div>
            </div>
        </div>
        <div class="modal-footer justify-content-center">
          <button type="button" class="btn btn-secondary mr-3" data-dismiss="modal">{{ __('Close') }}</button>
          <button type="submit" class="btn btn-primary">{{ __('Save') }} </button>
        </div>
      </div>
    </form>

这是我的控制器:

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;
use App\Http\Requests\Admin\Organization\Operator\UpdatePasswordRequest;
use App\Models\OrganizationOperator;
use Illuminate\Http\Request;
use App\Services\Response;
use Exception;
use Illuminate\Support\Facades\Log;

class OrganizationController extends Controller
{
    public function updateOperatorPassword(OrganizationOperator $operator, UpdatePasswordRequest $request)
    {
        try {
            $data = $request->validated();
            $user = $data['user'];
            // dd($user['password']);
            $operator->update([
                'password' => bcrypt($user['password']),
            ]);
            return Response::success(__('Successfully updated'));
        } catch (Exception $e) {
            Log::error($e->getMessage());
            return Response::error(__('Unable to update'), [], 500);
        }
    }

}

这是我的请求验证类:

<?php

namespace App\Http\Requests\Admin\Organization\Operator;

use Illuminate\Foundation\Http\FormRequest;

class UpdatePasswordRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array<string, mixed>
     */
    public function rules()
    {
        return [
            'id' => ['required', 'integer', 'exists:organization_operators,id'],
            'user.password' => ['required', 'string', 'min:8', 'confirmed'],
        ];
    }
}

JavaScript PHP Ajax Laravel 验证

评论

0赞 JS TECH 11/8/2022
首先,在 name 属性和 error 指令中应该是相同的字符串值,但您使用了不同的字符串值。接下来,错误指令仅在您提交表单并使用错误值重定向回来时才有效,但您从 AJAX 执行此操作以发送请求并获得响应。因此,您必须使用JavaScript手动执行此操作,以向表单字段显示错误消息。name="user[password]"@error('user.password') .. @enderror
0赞 Leena Patel 11/8/2022
attributein 和 in 形式应匹配。规则在哪里?我推荐jquery validate geeksforgeeks.org/form-validation-using-jqueryrules()confirmpassword
0赞 kaamrul 11/9/2022
这是我在请求类中确认的密码验证规则public function rules() { return [ 'password' => ['required', 'string', 'min:8', 'confirmed'], ]; }

答:

0赞 hadi purnomo 11/8/2022 #1

首先,我认为这个问题是因为您从客户端(即ajax / axios)发送请求。当您提交到服务器端(没有 ajax/axios)时,验证将起作用,然后响应验证将显示给 blade/html。

在这种情况下,您必须使用 class/id 手动为 html(在 jquery 中使用 innerHTML 或 .html()设置错误。

例如,来自服务器/API 的以下响应:

{ "error" : {
    "user.password" : ["invalid password"],
    ...
  }
}

在客户端,您需要将该消息放入带有 p 标签的 HTML 标签中。

<p id="error-password" ></p>

$('#error-password').html(error["user.password"])
// or
$('#error-password').text(error["user.password"])
0赞 kaamrul 11/9/2022 #2

最后我解决了这个问题。

1. 我更换控制器

public function updateOperatorPassword(OrganizationOperator $operator, UpdatePasswordRequest $request) 

public function updateOperatorPasswordApi(User $user, UpdatePasswordRequest $request) 

try {
    $data = $request->validated();
    $user = $data['user'];
    // dd($user['password']);
    $operator->update([
        'password' => bcrypt($user['password']),
    ]);
    return Response::success(__('Successfully updated'));
}

try {
    $data = $request->validated();
    $user->update([
        'password' => bcrypt($data['password']),
    ]);
    return Response::success(__('Successfully created'));
}

2. 我更改了我的刀片文件

<div class="row">
    <div class="col-sm-12">
        <div class="form-group @error('user.password_confirmation') error @enderror">
            <input type="password" class="form-control" id="confirmPassword" name="user[password_confirmation]" placeholder="{{ __('Confirm Password') }}">
        </div>
    </div>
</div>
@error('user.password_confirmation')
    <p class="error-message">{{ $message }}</p>
@enderror

<div class="form-group">
    <label for="">{{ __('Password') }}</label>
    <input name="password" type="password" class="form-control" id="password" aria-describedby="emailHelp" placeholder="{{ __('Password') }}" required>
    <small class="form-text error-message"></small>
</div>

<div class="row">
    <div class="col-sm-12">
        <div class="form-group @error('user.password_confirmation') error @enderror">
            <input type="password" class="form-control" id="confirmPassword" name="user[password_confirmation]" placeholder="{{ __('Confirm Password') }}">
        </div>
    </div>
</div>
@error('user.password_confirmation')
    <p class="error-message">{{ $message }}</p>
@enderror

<div class="form-group">
    <label for="">{{ __('Confirm Password') }}</label>
    <input name="password_confirmation" type="password" class="form-control" id="password_confirmation" aria-describedby="emailHelp" placeholder="{{ __('Confirm Password') }}" required>
    <small class="form-text error-message"></small>
</div>

评论

0赞 SEYED BABAK ASHRAFI 11/12/2022
正如目前所写的那样,你的答案尚不清楚。请编辑以添加其他详细信息,以帮助其他人了解您的代码中发生了哪些更改,从而解决了您的问题。您可以在帮助中心找到有关如何写出好答案的更多信息。