Hacer Pregunta

Conecta

1voto

No se como validar campos en vuejs

preguntó
Web
3485 Vistas
1 Respuestas
abierta

necesito validar campos en vue js pero no se como

Esta organizado de la siguiente forma

--api.php 

<?php
//Conexión a base de datos
$conn = new mysqli("localhost", "root", "", "crud");

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

if (isset($_POST["Buscar"])) {
        $Id_Products = $_POST['Id_Products'];
        $Search=$_POST["Search"];
        $Sar="SELECT * FROM tbl_products WHERE Id_Products='$Id_Products'";
        $Resulset=$conn->query($Sar);

    if ($Sar==true) {
        echo("consulta exitosa");
    }else{
        echo("error en consulta");
    }   
}

$out = array('error' => false);

$crud = 'read';

if(isset($_GET['crud'])){
    $crud = $_GET['crud'];
}

if($crud == 'read'){
    $sql = "select * from tbl_products";
    $query = $conn->query($sql);
    $members = array();

    while($row = $query->fetch_array()){
        array_push($members, $row);
    }

    $out['members'] = $members;
}

if($crud == 'create'){

    $Name_P = $_POST['firstname'];
    $lastname = $_POST['lastname'];
    $Quantity = $_POST['Quantity'];

    $sql = "insert into tbl_products (Name_P, Price_P, Quantity_P) values ('$Name_P', '$lastname','$Quantity')";
    $query = $conn->query($sql);

    if($query){
        $out['message'] = "Producto Agregado exitosamente";
    }
    else{
        $out['error'] = true;
        $out['message'] = $error;
        //$out['message'] = "Producto No agregado";
    }

}

if($crud == 'update'){

    $Id_Products = $_POST['Id_Products'];
    $Name_p = $_POST['Name_P'];
    $Price_p = $_POST['Price_P'];
    $Quantity_P = $_POST['Quantity_P'];

    $sql = "UPDATE tbl_products SET Name_P='$Name_p', Price_P='$Price_p', Quantity_P='$Quantity_P' WHERE Id_Products='$Id_Products'";

    $query = $conn->query($sql);

    if($query==true){
        $out['message'] = "Producto Actualizado";
    }
    else{
        $out['error'] = true;
        $out['message'] = $Quantity_P;
    }

}

if($crud == 'delete'){

    $Id_Products = $_POST['Id_Products'];

    $sql = "DELETE FROM tbl_products WHERE Id_Products='$Id_Products'";
    $query = $conn->query($sql);
    echo $sql;
    if($query){
        $out['message'] = "Producto Borrado";
    }
    else{
        $out['error'] = true;
        $out['message'] = "Producto No Borrado";
    }

}

$conn->close();

header("Content-type: application/json");
echo json_encode($out);
die();

?>

--modal.php

<!-- Add Modal -->
<div class="myModal" v-if="showAddModal" >
    <div class="modalContainer">
        <div class="modalHeader">
            <span class="headerTitle">New Products</span>
            <button class="closeBtn pull-right" @click="showAddModal = false">&times;</button>
        </div>
        <div class="modalBody" >
            <div class="form-group">
                <label>Name Product:</label>

                <input type="text" class="form-control" v-model="newMember.firstname" required="">
            </div>
            <div class="form-group">
                <label>Price Product:</label>
                <input type="number" class="form-control" v-model="newMember.lastname" required="">
            </div>
            <div class="form-group">
                <label>Quantity Product:</label>
                <input type="number" class="form-control" v-model="newMember.Quantity" required="">
            </div>
        </div>
        <hr>
        <div class="modalFooter">
            <div class="footerBtn pull-right">
                <button class="btn btn-default" @click="showAddModal = false"><span class="glyphicon glyphicon-remove"></span> Cancel</button> <button class="btn btn-primary" @click="showAddModal = false; saveMember();"><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="myModal" v-if="showEditModal">
    <div class="modalContainer">
        <div class="editHeader">
            <span class="headerTitle">Edit Product</span>
            <button class="closeEditBtn pull-right" @click="showEditModal = false">&times;</button>
        </div>
        <div class="modalBody">
            <div class="form-group">
                <label>Name Product:</label>
                <input type="text" class="form-control" v-model="clickMember.Name_P" required="">
            </div>
            <div class="form-group">
                <label>PriceProduct:</label>
                <input type="number" class="form-control" v-model="clickMember.Price_P" required="">
            </div>
            <div class="form-group">
                <label>Quantity Product:</label>
                <input type="number" class="form-control" v-model="clickMember.Quantity_P" required="">
            </div>
        </div>
        <hr>
        <div class="modalFooter">
            <div class="footerBtn pull-right">
                <button class="btn btn-default" @click="showEditModal = false"><span class="glyphicon glyphicon-remove"></span> Cancel</button> <button class="btn btn-success" @click="showEditModal = false; updateMember();"><span class="glyphicon glyphicon-check"></span> Save</button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="myModal" v-if="showDeleteModal">
    <div class="modalContainer">
        <div class="deleteHeader">
            <span class="headerTitle">Delete Product</span>
            <button class="closeDelBtn pull-right" @click="showDeleteModal = false">&times;</button>
        </div>
        <div class="modalBody">
            <h5 class="text-center">He Product is:</h5>
            <h2 class="text-center">{{clickMember.Name_P}} </h2>
        </div>
        <hr>
        <div class="modalFooter">
            <div class="footerBtn pull-right">
                <button class="btn btn-default" @click="showDeleteModal = false"><span class="glyphicon glyphicon-remove"></span> Cancel</button> <button class="btn btn-danger" @click="showDeleteModal = false; deleteMember(); " ><span class="glyphicon glyphicon-trash"></span> Confirm</button>
            </div>
        </div>
    </div>
</div>

--js/app.js

// El nombre no puede estar en blanco.

/*ocultamos el modal y hacemos e instanciamos members,newMember,clickmember,y los mensajes de error 
o exito*/
var app = new Vue({
    el: '#members',
    data:{
        showAddModal: false,
        showEditModal: false,
        showDeleteModal: false,
        errorMessage: "",
        successMessage: "",
        lastname:null,
        members: [],
        newMember: {Name_P:'', Price_P: '', Quantity_P:''},
        clickMember: {Name_P:'', Price_P: '', Quantity_P:''}
    },

    // obtenemos los datos de los miembros
    mounted: function(){
        this.getAllMembers();
    },

    // conectamos con el api.php
    methods:{

        getAllMembers: function(){
            axios.get('api.php')
                .then(function(response){
                    //console.log(response);
                    if(response.data.error){
                        app.errorMessage = response.data.message;
                    }
                    else{
                        app.members = response.data.members;
                    }
                });
        },

    // aqui guardamos los datos y le decimos que los envie con la variable crud equibale a la palabra
        // create del formularo showaddmodal 
        saveMember: function(){

            //console.log(app.newMember);
            var memForm = app.toFormData(app.newMember);
            axios.post('api.php?crud=create', memForm)
                .then(function(response){
                    //console.log(response);
                    app.newMember = {Name_P:'', Price_P: '',Quantity_P:''};
                    if(response.data.error){
                        app.errorMessage = response.data.message;
                    }
                    else{
                        app.successMessage = response.data.message
                        app.getAllMembers();
                    }
                });
        },

        // aqui actualizamos los datos y le decimos que los envie con la palabra
        // update del formularo showEditmodal 
        updateMember(){
            var memForm = app.toFormData(app.clickMember);
            axios.post('api.php?crud=update', memForm)
                .then(function(response){
                    console.log(response.data);
                    app.clickMember = {};
                    if(response.data.error){
                        app.errorMessage = response.data.message;
                    }
                    else{
                        app.successMessage = response.data.message
                        app.getAllMembers();
                    }
                });
        },

        // aqui Eliminamos los datos y le decimos que los envie con la palabra
        // delete del formularo showdeleteModal 
        deleteMember(){
            var memForm = app.toFormData(app.clickMember);
            axios.post('api.php?crud=delete', memForm)
                .then(function(response){
                    //console.log(response);
                    app.clickMember = {};
                    if(response.data.error){
                        app.errorMessage = response.data.message;
                    }
                    else{
                        app.successMessage = response.data.message
                        app.getAllMembers();
                    }
                });
        },

        // aqui Selecinamos a los productos y le decimos que los en liste

        selectMember(member){
            app.clickMember = member;
        },
        /*Instaciamos la información */
        toFormData: function(obj){
            var form_data = new FormData();
            for(var key in obj){
                form_data.append(key, obj[key]);
            }
            return form_data;
        },

        // nos muestre si esta esta fallando o si termino con exito
        clearMessage: function(){
            app.errorMessage = '';
            app.successMessage = '';
        }

    }
});

--css/style.css

body{
    background: url(../image/Beach.jpg);
    background-size: cover;     
}

.myModal{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: rgba(0, 0, 0, 0.4);
}

.modalContainer{
    width: 35%;
    background: #FFFFFF;
    margin:auto;
    margin-top:5%;
}

.modalHeader{
    padding:2%;
    background: #008CBA;
    color: #FFFFFF;
    height:50%;
    font-size:100%;
    padding-left:2%;
}

.editHeader{
    padding:2%;
    background: #4CAF50;
    color: #FFFFFF;
    height:50%;
    font-size:100%;
    padding-left:2%;
}

.deleteHeader{
    padding:2%;
    background: #f44336;
    color: #FFFFFF;
    height:50%;
    font-size:100%;
    padding-left:2%;
}

.modalBody{
    padding:20%;
}

.modalFooter{
    height:36%;
}

.footerBtn{
    margin-right:5%;
    margin-top:-12%;
}

.closeBtn{
    background: #008CBA;
    color: #FFFFFF;
    border:none;
}

.closeEditBtn{
    background: #4CAF50;
    color: #FFFFFF;
    border:none;
}

.closeDelBtn{
    background: #f44336;
    color: #FFFFFF;
    border:none;
}

.table{
    background: white;
    color:black;
    max-width: 800%;
    margin: 0 auto;
    padding: 20%;
    border-radius: 1%;
    box-shadow: 10% 10% 20% black;  
}
h1{
    text-align: center;
    font-size: 305%;
    color: white;
}

h4{
    text-align: center;
    font-size: 305%;
}
por Alejandro6543 (300 puntos) en Web
editado por

1 Respuesta

1voto

pedrourday Puntos3330

Es menos trabajo validar solo en el servidor, porque te ahorras de hacer 2 veces la misma validación (en el cliente y en el servidor).
O sea, en tu caso, cuando envias una petición AJAX en los métodos "saveMember", "updateMember" y "deleteMember", y recibis una respuesta de error; esa respuesta tiene que tener la información necesaria para saber si es un error de validación o cualquier otro tipo de error.
Si es un error de validación, tambien debe haber info sobre cuales son los campos "problemáticos". Asi, podes marcar esos campos (agregarles una clase css), y darles algun estilo visual y mensaje de error (puede ser, cambiar el color de fondo del campo a rojo y agregar un mensaje en color rojo).
Es mejor que la respuesta de error sea un objeto. No es necesario que tenga definido un constructor, puede ser un objeto plano o generico (el tipo de objeto con notación de llaves {}).

por pedrourday (3.330 puntos)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Etiquetas

Categorías

Conecta