Ajax Request using jQuery with Parsley validation

Ajax Request using jQuery with Parsley validation

| |
Image Carousel

Table of Contents

S.no Contents-topics
1 What is ajax request ?
2 Setting up parsley validation 

What is ajax request ?

Submitting a form through by-Default submit method reloads the page and also when any error occurs it reset the all the fields of the form , also to make load data fast and make better uset-experience we oftenly used ajax . Using ajax increase the page laoding speed and allow us to make live validation with database , for eg - working on  form where we have multiple fields which are depend upon one-another response like we are having fields like country , state and city where we show the states according to country and cities according to state so in these type of situtation we are fetching the data from backend in real time.

Setting up parsley validation

Submitting a  form through ajax gives flexibility of showiing errors and validate and saves the data in real time.As shown first we have to inialize parsley.css and parsley.min.js , in parsley validation it automatically takes the parameter from html attributes like (required,min,max) and other validations which you use in HTML attributes it automatically catches.
code for HTML file:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Developer Corner</title>
    <!-- CSS only -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://developercodez.com/developerCorner/parsley/parsley.css" >
    <!-- Js -->
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" crossorigin="anonymous"></script>
    <div class="container">
        <h2>Ajax form</h2>
        <form id="formSubmit">
         <!-- @csrf -->
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required >
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password" required >
            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                <label class="form-check-label" for="exampleCheck1">Check me out</label>
            <button type="submit"  class="btn btn-primary">Submit</button>
<script src="https://developercodez.com/developerCorner/parsley/parsley.min.js"></script>
    $("#formSubmit").submit(function(e) {
        if($(this).parsley().validate()) {
            var url = "{{ url('registration_process') }}";
            url: url,
            data: $('#formSubmit').serialize(),
            type: 'post',
            success: function(result) {
                if (result.status == 200) {
                    alert('Succesfully submit');

Note : if you are using laravel blade file then add @csrf below form tag or uncomment @csrf .

Tags: ajax request using jQuery with parsley validation , ajax request using laravel , ajax in laravel blade with parsley validation , validation with ajax,jquery , advance jquery , jquery advance code,
0 Comments (Please let us know your query)
Leave Comment
Leave Comment
Articles from other Categories
Load More