Search by Queries/Bugs/Errors

Insert data with form validation using ajax in laravel

Created at 06-Jul-2021 , By samar

With this article, we’ll look at some examples of how to address the "Insert data with form validation using ajax in laravel" problem.

This code snippet will help you to insert data if the form request is validated and return validation error messages using ajax in laravel view if the form is not validated.

Insert data with form validation and show validation error if not validated using ajax in laravel 8

//routes\web.php
Route::view('/ajax/index', 'ajax/index');
Route::post('/ajax/store', 'AjaxController@store')->name('contact.store');

//resources\views\ajax\index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="description" content="Free Web tutorials">
	<meta name="keywords" content="HTML, CSS, JavaScript">
	<meta name="author" content="John Doe">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>w3codegenerator</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-3">
                <form method="post" id="addNewContactForm" action="{{ route('contact.store') }}">
                    @csrf
                    <h3> Add Contact Details </h3>
                    <div id="ajaxResp" class="alert" style="display:none;"></div>
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id="name" name="name" /> 
                        <div id="nameError" class="error"></div>
                    </div>
                    <div class="form-group">
                        <label for="mobile">Mobile</label>
                        <input type="text" class="form-control" name="mobile" id="mobile"/>
                        <div id="mobileError" class="error"></div>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" name="email" id="email"  />
                        <div id="emailError" class="error"></div>
                    </div>

                    <div class="form-group">
                        <label for="addressOne">Address Line 1 </label>
                        <textarea class="form-control" name="address_line_1" id="addressOne">

Back to code snippet queries related laravel

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Don't forget to share this article! Help us spread the word by clicking the share button below.

We appreciate your support and are committed to providing you valuable and informative content.

We are thankful for your never ending support.

Bootstrap C C++ Cmd CodeIgniter Css Drupal Git Html Java Javascript Jquery Laravel Mongodb Nodejs Php Python React Sql Typescript Vuejs Wordpress

Insert data with form validation using ajax in laravel

Insert data with form validation and show validation error if not validated using ajax in laravel 8

Random Code Snippet Queries: Laravel

Latest Code Snippets