php - form - x-editable laravel

Usando X-editable para hacer múltiples campos editables en una forma horizontal bootstrap3 existente

Question

Estoy usando Bootstrap3 para el desarrollo de mi frontend y PHP para el procesamiento de back-end. Estoy tratando de usar el complemento x editable en una de mis páginas (perfil de usuario), donde tengo decenas de formularios con campos editables. Cada formulario está destinado a aceptar diferentes detalles de un usuario registrado y, por lo tanto, tiene todo tipo de entradas (texto, fecha, número, correo electrónico, etc.).

Mis requisitos son:

1. Digamos que tengo 10 segmentos diferentes, cada uno tiene un formulario para aceptar un conjunto particular de información [ej. Detalles básicos o detalles de contacto o pasatiempos, etc.]. Quiero tener un solo botón Editar para un formulario para que todos sus campos sean editables, un solo botón Guardar para guardar los datos actualizados (después de validarlos) y un botón Cancelar .
2. Deseo enviar algunos campos ocultos junto con el formulario.
3. Ya tengo un complemento de Validación altamente personalizado () que funciona muy bien para mí, ¿puedo usarlo en lugar del soporte integrado? Debido a que he hecho muchos cambios en ese complemento para satisfacer mis necesidades, no quiero volver a pasar por ese ciclo.

Aquí hay una demostración de lo que quiero

<div class="container">
  <h2>Contact Information <button class="btn btn-default btn-xs pull-right">    <i class="glyphicon glyphicon-pencil"></i></button></h2>
  <form class="form-horizontal" role="form">
<div class="form-group">
      <label class="control-label col-sm-2" for="name">Name:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="name" required max-length="50" placeholder="Enter Name">
      </div>
    </div>  
<div class="form-group">
      <label class="control-label col-sm-2" for="email">Email:</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="email" required pattern="[a-z0-9!#$%&''*+/=?^_`{|}~-]+(?:/.[a-z0-9!#$%&''*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" placeholder="Enter Email">
      </div>
    </div>   
<div class="form-group">
      <label class="control-label col-sm-2" for="number">Phone Number:</label>
      <div class="col-sm-10">
        <input type="number" class="form-control" id="number" required max-length="15" placeholder="Enter Phone Number">
      </div>
    </div>   
<div class="form-group">
      <label class="control-label col-sm-2" for="address">Address:</label>
      <div class="col-sm-10">
        <textarea class="form-control" id="address" placeholder="Enter Address"></textarea>
      </div>
    </div>
    <div class="form-group text-right">        
      <div class="col-sm-offset-2 col-sm-10">
        <button type="button" class="btn btn-default">Cancel</button>
        <button type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </form>
</div>

Consulte el JSFiddle de este formulario. Sería de gran ayuda si alguien puede hacer un trabajo al menos editable para esto.

PD: Soy nuevo en JSFiddle, así que no sabía cómo hacer el trabajo editable básico allí. la próxima vez publicaré un violín de exactamente lo que he probado y está funcionando en lugar de html básico. Gracias por adelantado.