jQuery ilə qeydiyyat doğrulaması

<form action="" id="application-form" method="post" autocomplete="off" enctype="multipart/form-data">
        @csrf
        <div class="form-group mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" name="name" aria-describedby="nameHelp" placeholder="Enter name" wire:model.defer="name">
            @error('name')<small id="nameHelp-php" class="form-text text-danger">{{ $message }}</small>@enderror
            <small id="nameHelp-js" class="form-text text-danger"></small>
        </div>

        <div class="form-group mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="text" class="form-control" id="email" name="email" aria-describedby="emailHelp" placeholder="Enter email" wire:model.defer="email">
            @error('email')<small id="emailHelp-php" class="form-text text-danger">{{ $message }}</small>@enderror
            <small id="emailHelp-js" class="form-text text-danger"></small>
        </div>

        <div class="form-group mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" name="password" aria-describedby="passwordHelp" placeholder="Enter password" wire:model.defer="password">
            @error('password')<small id="passwordHelp-php" class="form-text text-danger">{{ $message }}</small>@enderror
            <small id="passwordHelp-js" class="form-text text-danger"></small>
        </div>

        <div class="form-group mb-3">
            <label for="password_confirmation" class="form-label">Password Confirmation</label>
            <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" aria-describedby="password_confirmationHelp" placeholder="Enter password confirmation" wire:model.defer="password_confirmation">
            @error('password_confirmation')<small id="password_confirmationHelp-php" class="form-text text-danger">{{ $message }}</small>@enderror
            <small id="password_confirmationHelp-js" class="form-text text-danger"></small>
        </div>

        <div class="form-group">
            <button type="button" class="btn btn-primary float-end" wire:click="submit">Add</button>
        </div>
    </form>

$(document).ready(function () {

    $('#name').keyup(function () {
        $('#nameHelp-php').html('')
        let val = $(this).val().trim()
        if (val === '')
        {
            $('#nameHelp-js').html('The name field is required.')
        }
        else if (val.length < 3)
        {
            $('#nameHelp-js').html('The name must be at least 3 characters.')
        }
        else if (val.length > 255)
        {
            $('#nameHelp-js').html('The name must not be greater than 255 characters.')
        }
        else
        {
            $('#nameHelp-js').html('')
        }
    })

    $('#email').keyup(function () {
        $('#emailHelp-php').html('')
        let val = $(this).val().trim()
        if (val === '')
        {
            $('#emailHelp-js').html('The email field is required.')
        }
        else if (!validateEmail(val))
        {
            $('#emailHelp-js').html('The email must be a valid email address.\n')
        }
        else if (val.length > 255)
        {
            $('#emailHelp-js').html('The email must not be greater than 255 characters.')
        }
        else
        {
            $('#emailHelp-js').html('')
        }
    })

    $('#password').keyup(function () {
        $('#passwordHelp-php').html('')
        let val = $(this).val().trim()
        if (val === '')
        {
            $('#passwordHelp-js').html('The password field is required.')
        }
        else if (val.length < 8)
        {
            $('#passwordHelp-js').html('The password must be at least 8 characters.')
        }
        else if (val.length > 255)
        {
            $('#passwordHelp-js').html('The password must not be greater than 255 characters.')
        }
        else if (!val.match(/[A-Z]/))
        {
            $('#passwordHelp-js').html('The password must contain at least one uppercase character.')
        }
        else if (!specialCharacter(val))
        {
            $('#passwordHelp-js').html('The password must contain one special character.')
        }
        else if (val !== $('#password_confirmation').val())
        {
            $('#passwordHelp-js').html('The password and password confirmation must match.')
        }
        else
        {
            $('#passwordHelp-js').html('')
        }
    })

    $('#password_confirmation').keyup(function () {
        $('#password_confirmationHelp-php').html('')
        let val = $(this).val().trim()
        if (val === '')
        {
            $('#password_confirmationHelp-js').html('The password confirmation field is required.')
        }
        else if (val.length < 8)
        {
            $('#password_confirmationHelp-js').html('The password confirmation must be at least 8 characters.')
        }
        else
        {
            $('#password_confirmationHelp-js').html('')
        }
    })

    function validateEmail(emailAddress)
    {
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        return emailReg.test(emailAddress);
    }

    function specialCharacter(password)
    {
        var passReg = /[^\w\s]/gi;
        return passReg.test(password);
    }
})