title: Laravel - Check if username already exists before submitting form with jQuery AJAX
body: <p>I've made a registration form with a lot of fields. Since when I submit data and the validator redirects back with errors some inputs are empty and the user has to lose time refilling them, I want to implement some front-end validations.
  I'm stuck on checking if an username is already used on submit button press becasuse I'm not expert about AJAX.</p>
  
  <p>In the AuthController I've created a function that returns a Json containing a response in relation of existence or not of the username in the database.</p>
  
  <pre><code>class UserAuthController extends Controller
  {
      public function isUserNameInUse( $username )
      {
          if (Auth::where('username', $username) != null){
              return [ 'is_used' =&gt; 1 ];
          }
  
              return [ 'is_used' =&gt; 0 ];
      }
  }
  </code></pre>
  
  <p>In the routes.php there are these lines:</p>
  
  <pre><code>Route::group([ 'as' =&gt; 'api', 'prefix' =&gt; 'api', 'namespace' =&gt; 'Api'], function () {
  
       Route::group([ 'as' =&gt; 'auth', 'prefix' =&gt; 'auth'], function () {
            Route::any('/is_username_in_use/{username}', [
              'as' =&gt; 'isUserNameInUse',
              'uses' =&gt; 'UserAuthController@isUserNameInUse']);
  
  
      });
  
  });
  </code></pre>
  
  <p>The view is like that (only a piece of the form):</p>
  
  <pre><code>&lt;form action="{{ route('web.company.postSignup') }}" method="post" id="signup-form" class="form-horizontal"&gt;
              {!! csrf_field() !!}
              @include( 'errors.handler' )
  
                              &lt;label for="username"&gt;
                                  {{ _('Username*') }} &lt;/label&gt;
                              &lt;input type="text" class="form-control" name="username" id="username"
                                     value="{{ Input::old('username') }}" required&gt;
  
                              &lt;label for="password"&gt;
                                  {{ _('Password*') }}
                              &lt;/label&gt;
  
                              &lt;input type="password" class="form-control" name="password" id="password"
                                     value="{{ Input::old('password') }}" onchange="form.confirmPassword.pattern = this.value;"
                                     required&gt;
  
                              &lt;label for="confirmPassword"&gt;
                                  {{ _('Confirm Password*') }}
                              &lt;/label&gt;
  
                              &lt;input type="password" class="form-control" name="confirmPassword" id="confirmPassword" required&gt;
                              &lt;button class="btn btn-warning" id="submit-btn" type="submit"&gt;{{ _('Sign Up') }}&lt;/button&gt;
  
  &lt;/form&gt; 
  </code></pre>
  
  <p>This is the script, for now I've only tried to log the response of the controller, but it prints anything.</p>
  
  <pre><code>$(document).ready(function () {
      $('form#signup-form').submit(function () {
           var input_username = $('input[name=username]').val();
           console.log(input_username);
  
          $.getJSON('/api/auth/is_username_in_use/' + input_username, function (json) {
  
              console.log(json);
  
  
              });
              return false;
          });
  
      });
  </code></pre>