Ajax Request using jQuery with Parsley validation

14-Sep-2024

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

Also read: QR CODE GENERATOR USING JQUERY

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: .Copy

<!DOCTYPE html>

<head>

<title>Developer Corner</title>

</head>

<body>

<label for="exampleInputEmail1">Email address</label>

<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>

</div>

<label for="exampleInputPassword1">Password</label>

</div>

<label class="form-check-label" for="exampleCheck1">Check me out</label>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

</body>

</html>

$("#formSubmit").submit(function(e) {

e.preventDefault()

if($(this).parsley().validate()) {

var url = "{{ url('registration_process') }}";

$.ajax({

url: url,

data: $('#formSubmit').serialize(),

type: 'post',

success: function(result) {

if (result.status == 200) {

alert('Succesfully submit');

}

});

}

});

</script>

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,

Vineet Maanas

We are Vineet Maanas we are working as professional developers from the last 8 years and always looking to discover something amazing getting followed by market trends and always push new developers to learn something new with our tutorials Thankyou.