Duplicate form validation errors on click submit in Laravel

Question

I've a register form in my project and I'm validating it on server side. If any of the fields is empty, it shows validation errors defined in Register Controller. The issue is that If the end-user again hits submit, the same error is duplicated that looks weird. How would I solve it?

Register Blade

    <form id="register_forms" style="display:none" action="{{route('register' , app()->getLocale())}}">
      @csrf
       <div>
        <label for="register_name"></label>
          <input placeholder="name" id="register_name" type="text" class="form-control input @error('register_name') is-invalid @enderror" name="register_name" value="{{ old('register_name') }}" required autocomplete="register_name" autofocus/>
    
          @error('register_name')
           <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
          @enderror
       </div>
    
    
       <div>
        <label for="register_email"></label>
         <input placeholder="email" id="register_email" type="email" class=" input form-control @error('register_email') is-invalid @enderror" name="register_email" value="{{ old('register_email') }}" required autocomplete="register_email"/>
    
          @error('register_email')
           <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong></span>
          @enderror
       </div>


  <div class="some-class">
   <input  id="user_type_private" value="user" type="radio" class="radio" name="user_type" >
   <label  for="user_type_private">private</label>
    <input id="user_type_company" value="company" type="radio" class="radio" name="user_type" >
    
   <label  for="user_type_company">{{ __('Company')}}</label>
      @error('user_type')
       <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong></span>
      @enderror

    </div>
    
       <input id="my-register" type="submit" value="submit">
    
     </form>

JavaScript

<script>
  $("#my-register").click(function(e){
     e.preventDefault();
     $.ajaxSetup({
     headers: {
                   'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
               }
           });
            $.ajax({
        type: "post",
      url: "{{ route('register') }}",
      data: $('#register_forms').serialize(),
      dataType: 'json',
      success: function(data) {
            window.location = "https://carchainclassics.com/login";
        },
        error: function (err) {
            if (err.status == 422) {
                console.log(err.responseJSON);
                $('#success_message').fadeIn().html(err.responseJSON.message);

                $.each(err.responseJSON.errors, function (i, error) {
                    grecaptcha.reset();
                    var el = $(document).find('[name="'+i+'"]');
                    el.after($('<span style="color: #ff0000;">'+error[0]+'</span>'));
                });
            }
        }
    });
        });
</script>

Controller

protected function validator(array $data)
{
    $validator = Validator::make($data, [
        'register_name' => ['required', 'string', 'max:35'],
        'register_email' => ['required', 'string', 'email', 'max:255', 'unique:users,email'],
         'user_type' => ['required',Rule::in(['user', 'company']),],
    ]);
    $validator->setAttributeNames([
        'register_email' => 'email'
    ]);

    return $validator;
}

You are appending (el.after), meaning you'll add a new copy every time. Maybe you should instead create an element to hold the error message (which will be empty at the beginning), whose content you can replace after every submit. — El_Vanja
– El_Vanja, Commented Mar 23, 2021 at 11:44
Following on the comment of @El_Vanja You can also change the visibility of the error message. — Jason Harrison
– Jason Harrison, Commented Mar 23, 2021 at 20:54

BABAK ASHRAFI · Accepted Answer · 2021-03-23 11:59:38Z

1

You just need to empty the html before each request. Add below code in your jquery ajax for clearing message. Add a class of message to each message span.

beforeSend: function(data) {
            window.location = "https://carchainclassics.com/login";
    $('.message').empty();
},

error: function (err) {
    if (err.status == 422) {
    console.log(err.responseJSON);
                    
    $('#success_message').fadeIn().html(err.responseJSON.message);

    $.each(err.responseJSON.errors, function (i, error) {
            grecaptcha.reset();
            var el = $(document).find('[name="'+i+'"]');
            el.after($('<span class="message" style="color: #ff0000;">'+error[0]+'</span>'));
        });
    }
}

answered Mar 23, 2021 at 11:59

BABAK ASHRAFI

4,3114 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shaan Over a year ago

It worked for me but one last thing left. I just added the radio buttons to select the user_type and add validation into controller but it shows two validation errors on click submit button. Could you please re-check my question above and suggest what I' m doing wrong?

Shaan Over a year ago

The error is "user field is required" but it appears twice not a single time, don't know why..

BABAK ASHRAFI Over a year ago

Are you sure? You don't have any validation for user field.

Collectives™ on Stack Overflow

Duplicate form validation errors on click submit in Laravel

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related