CODEWITHSUNDEEP
jquerylaravellaravel-blade
mySun
mySun

Reputation: 1706

How to use jQuery validation in blade?

I create form with blade in Laravel project,

But for example in this form i use name="adult[{{ $i }}][first_name]" in Input tag.

I add .passenger-validation in Form tag:

<form method="" route="" class="passenger-validation"></form>

I use jQuery validation in other project:

$(".passenger-validation").validate({
  rules: {
    // simple rule, converted to {required:true}
    name: "required",
    // compound rule
    email: {
        required: true,
        email: true
    }
  }
});

Now, How to use jQuery validation in form with this name name="adult[{{ $i }}][first_name]"?

I use this website: https://jqueryvalidation.org

Thank you.

Upvotes: 1

Views: 11139

Answers (4)

pushpendra thakur
pushpendra thakur

Reputation: 1

jQuery validation is a powerful tool for validating form inputs on the client-side. In a Laravel Blade view, you can use jQuery validation by including the jQuery library and the jQuery Validation plugin in your HTML file, and then adding the validation rules to your form elements.

Here's a step-by-step guide to using jQuery validation in a Laravel Blade view:

  1. Include jQuery and the jQuery Validation plugin in your Blade view. You can use a CDN or download the files and include them in your project:

          $(document).ready(function(){
        $('#myForm').validate({
          messages: {
            username: "Please enter a valid username."
          }
        });
      });



   
       <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

    <form id="myForm">
      <input type="text" name="username" required>
      <input type="submit" value="Submit">
    </form>

  2. Add a validation rule to your form input. In this example, we're using the required rule, which makes the input required:

    <form id="myForm">
   <input type="text" name="username" required>
   <input type="submit" value="Submit">
</form>

  3. Initialize the jQuery Validation plugin on your form. In this example, we're using the validate function to validate the form:

    <script>
   $(document).ready(function(){
     $('#myForm').validate();
   });
</script>

  4. Customize the validation messages. By default, the plugin will display an error message when a validation rule is not met. You can customize these messages by adding messages to your validate function:

    <script>
   $(document).ready(function(){
     $('#myForm').validate({
       messages: {
         username: "Please enter a valid username."
       }
     });
   });
</script>

That's it! Now, when you submit the form, the jQuery Validation plugin will check the inputs for the validation rules you've set, and display an error message if any rules are not met. You can add more validation rules by adding them to your form inputs and updating the validate function accordingly.

For more details you can visit on my personal blog: https://technicalguide.net/jquery-validation-in-laravel-8/

Upvotes: 0

V16
V16

Reputation: 119

First change this:

<form method="" route="" class="passenger-validation">

to:

<form method="" route="" class="passenger-validation" name="passenger-validation">

For JQuery Validation you can stick with your previous method. You just need to call myvalidation.js file to blade template like:

<script src="{{ asset ("/js/myvalidation.js") }}" type="text/javascript"></script>

And put validation rules there:

 $(".passenger-validation").validate({
        rules: {
           // simple rule, converted to {required:true}
           name: "required",
           // compound rule
           email: {
                  required: true,
                  email: true
                  }
        }
  });

In Laravel Blade you will use HTML 5 Validation rules only like:

{{ Form:: text('title', null, array('class' => 'form-control', 'required' => '')) }}

you can change "text" with "email" or something that your form need.

see more here

Upvotes: 2

Qammar Feroz
Qammar Feroz

Reputation: 718

Just include the JQuery validator js file in your blade temp. then use it as you were using before. for example, if js file is in public/js folder, you can add it in blade template like

<script src="{{ asset ("/js/validator.js") }}" type="text/javascript"></script>

and then create a js function validateFm

<script>
function validateFm(){
  $(".passenger-validation").validate({
  rules: {
  // simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
    required: true,
    email: true
    }
}
  });

}

Finally, call the function validateFm on submit.

<input type="submit" onClick="validateFm();">

Change the name of js file, file location and validator function, as per your need.

Upvotes: 2

Onix
Onix

Reputation: 2179

For validation you will always check the same field, so you should have something static to refer to, for example if you can add an id and then just refer to the id instead of the name would work just fine.

Change: $(".passenger-validation").validate({

To : $("#your_input_id").validate({

Upvotes: 1

Related Questions