Laravel Ajax form validation error in error message displayed on validation

Question

I have a simple form that i'm posting via Ajax. I have already set up validation messages in the controller. below is the view form and ajax handling it:

$('.sounds-artist-signup').on('click', function(){
  var firstnameInput = "#artistSignup input[name='firstname']";
  var lastnameInput = "#artistSignup input[name='lastname']";
  
   $.ajax({
            type: "POST",
            url: $(this).closest('form').attr('action'),
            data: { firstname: $('#firstname').val(), lastname: $('#lastname').val()},
            beforeSend: function() { 
                $(".sounds-artist-signup").prop('disabled', true);
            },           
        }).done(function(data){
            console.log(data);
            
        }).fail(function(xhr, textStatus, errorThrown) {
            if($('input[name="firstname"]').val().length == 0)
            {
                if(xhr.status == 422)
                { 
                    $(firstnameInput).addClass('is-invalid');
                    $('.invalid-feedback').text(xhr.responseJSON.errors.firstname["0"]).css('font-size','0.9rem');                    
                }                              
            }
            if($('input[name="lastname"]').val().length == 0)
            {
                if(xhr.status == 422)
                { 
                    $(lastnameInput).addClass('is-invalid');
                    $('.invalid-feedback').text(xhr.responseJSON.errors.lastname["0"]).css('font-size','0.9rem');                    
                }                              
            }

            $(".sounds-artist-signup").prop('disabled', false);
        });
     return false;
    });

<form id="artistSignup" method="POST" action="{{ route('register') }}">
  @csrf
  
  <div class="form-group">
     <div class="input-group icon">
       <input type="text" class="form-control{{ $errors->has('firstname') ? ' is-invalid' : '' }}" name="firstname" id="firstname" placeholder="Firstname" required="required">  
       <span class="invalid-feedback"></span>     
     </div>
  </div>
  <div class="form-group">
    <div class="input-group icon">
       <input type="text" class="form-control{{ $errors->has('lastname') ? ' is-invalid' : '' }}" name="lastname" id="lastname" placeholder="Lastname" required="required">            <span class="invalid-feedback"></span>
    </div>
  </div>
  <div class="form-group sign">
    <button type="submit" class="btn btn-primary login-btn btn-block sounds-artist-signup">Sign UP</button>
</div>
</form>

Whats happening is: if i click on the 'Sign up' button without filling in the form, validation error message is shown but both display for lastname i.e

what's going on here? kindly assist

Firstly I would suggest calling jquery on form submit and prevent default that will prevent form trying to submit twice as I believe thats whats happening here — Imphusius
– Imphusius, Commented Jun 5, 2018 at 11:26
hi @Imphusius. i have already captured that (but had forgotten to include it on my question above). i return false to prevent default form action — suo
– suo, Commented Jun 6, 2018 at 5:13

Raheel Khan · Accepted Answer · 2018-06-06 05:26:43Z

1

You are using the same class for message so javascript is overriding all selectors

Method 1

Use different classes for each message, ie: instead of using

<span class="invalid-feedback"></span>

use unique class

<span class="firstname-invalid-feedback"></span>

Method 2

Use jquery .next() selector

$(firstnameInput).next('.invalid-feedback').text(xhr.responseJSON.errors.firstname["0"]).css('font-size','0.9rem');

edited Jun 6, 2018 at 5:26

answered Jun 6, 2018 at 5:19

Raheel Khan

1115 bronze badges

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

1 Comment

suo Over a year ago

excellent. had worked out to go with method 1. tried method 2 and it works as well and it seems 'cleaner'. thankyou!

Collectives™ on Stack Overflow

Laravel Ajax form validation error in error message displayed on validation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related