entre Desarrolladores

Question

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%;
}

Answer 1

1 Respuestas

Answer 2 · 2019-06-09T01:22:07+0000

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 {}).

entre Desarrolladores

Registrate y pregunta

Recibe respuestas

Vota y selecciona respuestas

Pregunta

No se como validar campos en vuejs

Por favor, accede o regístrate para añadir un comentario.

1 Respuesta

Por favor, accede o regístrate para añadir un comentario.

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

Otras Preguntas y Respuestas

Actividad Reciente

alyvrs preguntó Oct 19

ManHol preguntó Jul 9

ArtEze respondió Abr 24

ArtEze seleccionó una respuesta Abr 24

ArtEze respondió Abr 24

ArtEze preguntó Abr 24

ArtEze respondió Abr 24

ArtEze respondió Abr 24

ArtEze comentó Abr 24

Santiago2610 comentó Mar 23

Ultimas Preguntas

alyvrs preguntó

ManHol preguntó

ArtEze preguntó

Santiago2610 preguntó

gonzalss preguntó

ParkJo preguntó

ovedg preguntó

Ehdez preguntó

pedrourday preguntó

pedrourday preguntó

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

Etiquetas

Categorías

Pregunta

No se como validar campos en vuejs

Por favor, accede o regístrate para añadir un comentario.

1 Respuesta

Por favor, accede o regístrate para añadir un comentario.

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

En el blog

Otras Preguntas y Respuestas

Sin Respuesta

Preguntas relacionadas

Actividad Reciente

alyvrs preguntó Oct 19

ManHol preguntó Jul 9

ArtEze respondió Abr 24

ArtEze seleccionó una respuesta Abr 24

ArtEze respondió Abr 24

ArtEze preguntó Abr 24

ArtEze respondió Abr 24

ArtEze respondió Abr 24

ArtEze comentó Abr 24

Santiago2610 comentó Mar 23

Ultimas Preguntas

alyvrs preguntó

ManHol preguntó

ArtEze preguntó

Santiago2610 preguntó

gonzalss preguntó

ParkJo preguntó

ovedg preguntó

Ehdez preguntó

pedrourday preguntó

pedrourday preguntó

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

Etiquetas

Categorías

Conecta