How to make the form submit with the following code in laravel?

Question

I have used the below code for form submission and validation, but form is not getting submitted when it gets validated.

  <form action = "/edit/{{$users[0]->id}}" id="myform" method = "post">
  <input type = "hidden" name = "_token" value = "{{csrf_token()}}">

  <div class="form-group">
     <label for="Name">Name</label>
     <input id="my-input" name="name" class="form-control left" value="{{$users[0]->name}}" type="text">
  </div>

  <div class="form-group">
    <label for="url">Name of the Link</label>
    <input type="text" name="url" id="url" class="form-control" value = "{{$users[0]->url}}" aria-describedby="helpId">
  </div>

  <div class="form-group">
    <label for="Category">Category</label>
    <select name="category" class="form-control">
    <option value="<?php echo $users[0]->category; ?>" selected><?php echo $users[0]->category; ?></option>
    <option value="Human Resource">Human Resource</option>
    <option value="Decksys">Decksys</option>
    <option value="Pentaho">Pentaho</option>
    <option value="Makto">Makto</option>
    <option value="Carton">Carton</option>
    </select>


  </div>


  <input type="submit" class="btn btn-primary" value="Submit">
  </form>

Find below the script which I have used :

   <script type="text/javascript">
   // just for the demos, avoids form submit
   jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
    });
    $( "#myform" ).validate({
     rules: {
     url: {
       required: true,
          url: true
        }

       }
      });
     </script>

Find the controller code below

 public function edit(Request $request,$id) {
    $name = $request->input('name');
    $url = $request->input('url');
    $category = $request->input('category');

    DB::update('update links set name = ?,url=?,category=? where id = ?',[$name,$url,$category,$id]);
    \Session::flash('message', 'Successfully updated!');
    return redirect()->route('home');

    }

Kindly suggest a solution to submit the form along with form validation.

Answer 1

You have to add submit handler code to your script. You can check this tutorial to check more understanding how to validation script is working. https://www.sitepoint.com/basic-jquery-form-validation-tutorial/

   $("#myform").validate({
      // Specify validation rules
      rules: {
        ....
      },
      // Specify validation error messages
      messages: {
        ...
      },
      // Make sure the form is submitted to the destination defined
      // in the "action" attribute of the form when valid
      submitHandler: function(form) {
        form.submit();
      }
    });
  });

Answer 2

The submit method needs to be called once the validation is performed. Take a look in the documentation.
https://jqueryvalidation.org/validate/

Remeber to define proper route though. like

 Route::post('/doadduser','usercontroller@createuser');


You need to call a submit handler to submit the form.
Here is an working example. 

    <form action="/doadduser" name="registration" method="POST">

        <label for="firstname">First Name</label>
        <input type="text" name="firstname" id="firstname" placeholder="John">

        <label for="lastname">Last Name</label>
        <input type="text" name="lastname" id="lastname" placeholder="Doe">

        <label for="email">Email</label>
        <input type="email" name="email" id="email" placeholder="john@doe.com">

        <label for="password">Password</label>
        <input type="password" name="password" id="password" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;">

        <button type="submit">Register</button>
      </form>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script type="text/javascript">
    // Wait for the /books/doAddbookDOM to be ready
$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='registration']").validate({
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Specify validation error messages
    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: "Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});
</script>

That is working fine in my local. Hope that help you too.

Answer 3

You have to do something like this in your controller.

public function edit(Request $request,$id) {
 $this->validate($request, [
    'name' => 'required',
    'url' => 'required',
    'category' => 'required',
 ]);

 $name = $request->input('name');
 $url = $request->input('url');
 $category = $request->input('category');

 DB::update('update links set name = ?,url=?,category=? where id =  ?',[$name,$url,$category,$id]);
\Session::flash('message', 'Successfully updated!');
return redirect()->route('home');

 }

If validation fails laravel will automatically throws you back to your view. Add this code to your view if validation fails it will show all the errors.

@if (count($errors) > 0)
<div class="alert alert-danger">
    <ul>
        @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
 @endif

Answer 4

you need to define route as shown below:

Route::PATCH('/category/update/{id}','Controller@update');

also define method PATCH after your <form>:

<input name="_method" type="hidden" value="PATCH">

Answer 5

I think you should validation in controller side and return json response. Then you check response with jquery.

Or maybe you should add this function after validate;

  submitHandler: function(form) {
      form.submit();
  }