---
description: >-
  https://programmingfields.com/laravel-form-validation-using-jquery-form-validation/
---

# Form Validation Using jQuery Validator (ok)

<figure><img src="https://1957079826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCBeDUD-PK_RF-YgJRe%2Fuploads%2Fm0YeGIZSExmeB78oNVnv%2Fimage.png?alt=media&#x26;token=96b1dd16-9432-446f-8445-5303b4d45fb7" alt=""><figcaption></figcaption></figure>

![](https://1957079826-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MCBeDUD-PK_RF-YgJRe%2Fuploads%2FEdU7rM9mnSj2F5j9dAjv%2Fimage.png?alt=media\&token=872cb523-34fe-4395-8030-eb6c7c7ca922)

C:\xampp8\htdocs\plugindev\app\Models\User.php

```php
<?php
namespace App\Models;
// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
class User extends Authenticatable
{
  use HasApiTokens, HasFactory, Notifiable;
  /**
   * The attributes that are mass assignable.
   *
   * @var array<int, string>
   */
  protected $fillable = [
    'first_name',
    'last_name',
    'email',
    'phone',
    'password',
    'gender',
    'dob',
    'address',
    'city',
    'state',
    'zipcode'
  ];
  /**
   * The attributes that should be hidden for serialization.
   *
   * @var array<int, string>
   */
  protected $hidden = [
    'password',
  ];
}

```

C:\xampp8\htdocs\plugindev\app\Http\Controllers\UserController.php

```php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class UserController extends Controller
{
  public function index()
  {
    return view("register");
  }
  // register user
  public function registerUser(Request $request)
  {
    $userArray = array(
      "first_name" => $request->firstName,
      "last_name" => $request->lastName,
      "email" => $request->email,
      "phone" => $request->phone,
      "password" => $request->password,
      "gender" => $request->gender,
      "dob" => $request->dateOfBirth,
      "address" => $request->address,
      "city" => $request->city,
      "state" => $request->state,
      "zipcode" => $request->zipcode,
    );
    $user = User::create($userArray);
    if (!is_null($user)) {
      return back()->with("success", "Registration completed successfully");
    } else {
      return back()->with("failed", "Registration failed. Try again.");
    }
  }
}

```

C:\xampp8\htdocs\plugindev\resources\views\register.blade.php

```
<!doctype html>
<html lang="en">
<head>
  <title>User Registration | Form Validation Using jQuery</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <style>
    label.error {
      color: #dc3545;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div class="container pt-3">
    <form action="{{url('register-user')}}" method="POST" autocomplete="off" id="regForm">
      @csrf
      <div class="row">
        <div class="col-xl-8 m-auto">
          <div class="card shadow">
            <div class="card-header">
              <h4 class="text-center font-weight-bold"> Form Validation Using jQuery Validator </h4>
            </div>
            <div class="card-body pl-4 pr-4">
              <div class="row">
                <div class="col-xl-6">
                  <div class="form-group">
                    <label for="firstName"> First Name <span class="text-danger">*</span> </label>
                    <input type="text" name="firstName" id="firstName" class="form-control" placeholder="First Name">
                  </div>
                </div>
                <div class="col-xl-6">
                  <div class="form-group">
                    <label for="lastName"> Last Name <span class="text-danger">*</span> </label>
                    <input type="text" name="lastName" id="lastName" class="form-control" placeholder="Last Name">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-xl-6">
                  <div class="form-group">
                    <label for="email"> Email <span class="text-danger">*</span> </label>
                    <input type="email" name="email" id="email" class="form-control" placeholder="Email">
                  </div>
                </div>
                <div class="col-xl-6">
                  <div class="form-group">
                    <label for="phone"> Phone <span class="text-danger">*</span> </label>
                    <input type="text" name="phone" id="phone" class="form-control" placeholder="Phone">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-xl-6">
                  <div class="form-group">
                    <label for="password"> Password <span class="text-danger">*</span> </label>
                    <input type="password" name="password" id="password" class="form-control" placeholder="Password">
                  </div>
                </div>
                <div class="col-xl-6">
                  <div class="form-group">
                    <label for="confirmPassword"> Confirm Password <span class="text-danger">*</span> </label>
                    <input type="password" name="confirmPassword" id="confirmPassword" class="form-control"
                      placeholder="Confirm Password">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-xl-6">
                  <div class="form-group">
                    <label for="gender"> Gender <span class="text-danger">*</span> </label>
                    <select class="form-control" name="gender" id="gender">
                      <option selected value="" disabled>Select</option>
                      <option value="male">Male</option>
                      <option value="female">Female</option>
                    </select>
                  </div>
                </div>
                <div class="col-xl-6">
                  <div class="form-group">
                    <label for="dateOfBirth"> Date of Birth <span class="text-danger">*</span> </label>
                    <input type="date" name="dateOfBirth" id="dateOfBirth" class="form-control"
                      placeholder="Date of Birth">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-xl-6">
                  <div class="form-group">
                    <label for="address"> Address <span class="text-danger">*</span></label>
                    <input type="text" name="address" id="address" class="form-control" placeholder="Address">
                  </div>
                </div>
                <div class="col-xl-6">
                  <div class="form-group">
                    <label for="city"> City <span class="text-danger">*</span></label>
                    <input type="text" name="city" id="city" class="form-control" placeholder="City">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-xl-6">
                  <div class="form-group">
                    <label for="state"> State <span class="text-danger">*</span> </label>
                    <input type="text" name="state" id="state" class="form-control" placeholder="State">
                  </div>
                </div>
                <div class="col-xl-6">
                  <div class="form-group">
                    <label for="zipcode"> Zip Code <span class="text-danger">*</span></label>
                    <input type="text" name="zipcode" id="zipcode" class="form-control" placeholder="Zip Code">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-xl-6 offset-lg-6 text-right">
                  <button type="submit" class="btn btn-success"> Create your account </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
  <script>
    $(document).ready(function() {
        $("#regForm").validate({
            rules: {
                firstName: {
                    required: true,
                    maxlength: 20,
                },
                lastName:{
                    required: true,
                    maxlength: 20,
                },
                email: {
                    required: true,
                    email: true,
                    maxlength: 50
                },
                phone: {
                    required: true,
                    minlength: 10,
                    maxlength: 10,
                    number: true
                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirmPassword: {
                    required: true,
                    equalTo: "#password"
                },
                gender: {
                    required: true,
                },
                dateOfBirth: {
                    required: true,
                    date: true
                },
                address: {
                    required: true,
                    maxlength: 50
                },
                city: {
                    required: true,
                    maxlength: 40
                },
                state: {
                    required: true,
                    maxlength: 40
                },
                zipcode: {
                    required: true,
                    minlength: 6,
                    maxlength: 6
                }
            },
            messages: {
                firstName: {
                    required: "First name is required",
                    maxlength: "First name cannot be more than 20 characters"
                },
                lastName: {
                    required: "Last name is required",
                    maxlength: "Last name cannot be more than 20 characters"
                },
                email: {
                    required: "Email is required",
                    email: "Email must be a valid email address",
                    maxlength: "Email cannot be more than 50 characters",
                },
                phone: {
                    required: "Phone number is required",
                    minlength: "Phone number must be of 10 digits"
                },
                password: {
                    required: "Password is required",
                    minlength: "Password must be at least 5 characters"
                },
                confirmPassword: {
                    required:  "Confirm password is required",
                    equalTo: "Password and confirm password should same"
                },
                gender: {
                    required:  "Please select the gender",
                },
                dateOfBirth: {
                    required: "Date of birth is required",
                    date: "Date of birth should be a valid date"
                },
                address: {
                    required: "Address is required",
                    maxlength: "Address cannot not be more than 50 characters"
                },
                city: {
                    required: "City is required",
                    maxlength: "City cannot be more than 40 characters"
                },
                state: {
                    required: "State is required",
                    maxlength: "City cannot be more than 40 characters"
                },
                zipcode: {
                    required: "Zipcode is required",
                    minlength: "Zipcode must be of 6 digits",
                    maxlength: "Zipcode cannot be more than 6 digits"
                }
            }
        });
    });
  </script>
</body>
</html>

```

C:\xampp8\htdocs\plugindev\routes\web.php

```php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
  return view('welcome');
});
Route::get("register", [UserController::class, "index"]);
Route::post("register-user", [UserController::class, "registerUser"]);

```

C:\xampp8\htdocs\plugindev\database\migrations\2014\_10\_12\_000000\_create\_users\_table.php

```php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration {
  /**
   * Run the migrations.
   *
   * @return void
   */
  public function up()
  {
    Schema::create('users', function (Blueprint $table) {
      $table->id();
      $table->string('first_name')->nullable();
      $table->string('last_name')->nullable();
      $table->string('email')->unique();
      $table->string('phone')->nullable();
      $table->string('password')->nullable();
      $table->string('gender')->nullable();
      $table->string('dob')->nullable();
      $table->string('address')->nullable();
      $table->string('city')->nullable();
      $table->string('state')->nullable();
      $table->string('zipcode')->nullable();
      $table->timestamps();
    });
  }
  /**
   * Reverse the migrations.
   *
   * @return void
   */
  public function down()
  {
    Schema::dropIfExists('users');
  }
};

```
