Add Property JavaScript Validation
Agragar validacion a nuestra forma! En resources/views/backend/property/add_property.blade.php
- Empatar la forma con el id=“myForm” que ya definimos en el codigo JS al final de la pagina
- No olvidar usar el “form-group” par alos campos que queremos validar
...
{{-- Nombre Propiedad --}}
<div class="col-sm-6">
<div class="form-group mb-3">
<label class="form-label">Nombre</label>
<input type="text" name="property_name" class="form-control">
</div>
</div><!-- Col -->
{{-- Property Status --}}
<div class="col-sm-6">
<div class="form-group mb-3">
<label class="form-label">Estatus</label>
<select name="property_status" class="form-select"
id="exampleFormControlSelect1">
<option selected="" disabled="">Seleccionar Estatus</option>
<option value="rent">Para Renta</option>
<option value="buy">Para Compra</option>
</select>
</div>
</div><!-- Col -->
{{-- Lowest Price --}}
<div class="col-sm-6">
<div class="form-group mb-3">
<label class="form-label">Precio mas Bajo</label>
<input type="text" name="lowest_price" class="form-control">
</div>
</div><!-- Col -->
{{-- Max Price --}}
<div class="col-sm-6">
<div class="form-group mb-3">
<label class="form-label">Precio mas Alto</label>
<input type="text" name="max_price" class="form-control">
</div>
</div><!-- Col -->
...
{{-- Property Type --}}
<div class="col-sm-4">
<div class="form-group mb-3">
<label class="form-label">Tipo de Propiedad</label>
<select name="ptype_id" class="form-select" id="exampleFormControlSelect1">
<option selected="" disabled="">Seleccionar Tipo</option>
@foreach($propertytype as $ptype)
<option value="{{ $ptype->id }}">{{ $ptype->type_name }}</option>
@endforeach
</select>
</div>
</div><!-- Col -->
...
{{-- Script de JS para la Validación --}}
<script type="text/javascript">
$(document).ready(function (){
$('#myForm').validate({
rules: {
property_name: {
required : true,
},
property_status: {
required : true,
},
lowest_price: {
required : true,
},
max_price: {
required : true,
},
ptype_id: {
required : true,
},
},
messages :{
property_name: {
required : 'Favor entrar nombre de la Propiedad, campo requerido',
},
property_status: {
required : 'Favor seleccionar Estatus de la Propiedad, campo requerido',
},
lowest_price: {
required : 'Favor entrar precio mas bajo, campo requerido',
},
max_price: {
required : 'Favor entrar precio mas alto, campo requerido',
},
ptype_id: {
required : 'Favor seleccionar Tipo de Propiedad, campo requerido',
},
},
errorElement : 'span',
errorPlacement: function (error,element) {
error.addClass('invalid-feedback');
element.closest('.form-group').append(error);
},
highlight : function(element, errorClass, validClass){
$(element).addClass('is-invalid');
},
unhighlight : function(element, errorClass, validClass){
$(element).removeClass('is-invalid');
},
});
});
</script>
Listo!