JavaScript - Validar Input de Email

   
Vista:
Imágen de perfil de Carlos

Validar Input de Email

Publicado por Carlos (16 intervenciones) el 15/09/2017 19:07:09
Estimados buenas tardes actualmente estoy colocando un codigo javascript que actualice automaticamente los datos en la base de datos sin tener que recargar la pagina, el proceso lo hace perfecto pero tengo un campo e-mail que quiero validar... coloque al input type "email" pero igual el codigo no valida, lo mismo pasa cuando el campo esta vacio, si esta como required deberia hacer la validacion tambien pero no lo hace.

Paso la estructura a continuacion

En Edit.php tengo esta parte HTML

1
2
3
4
5
6
7
8
9
10
<div class="message-box" id="message_<?php echo $comments[$k]["IdUsuario"];?>">
 
<div class="titulo_usuario">Correo Electónico:</div>
<div class="message_usuario message-contentEmail">
	<?php echo $comments[$k]["EmailUsuario"]; ?>
</div>
 
<div class="botonUsuario">
	<button class="btnEditEmailAction btn btn-warning btn-circle usuario" name="edit" onClick="showEditEmailBox(this,<?php echo $comments[$k]["IdUsuario"]; ?>)"><i class="fa fa-pencil"></i></button>
</div>

Al hacer onClick llama esta parte JavaScript donde tengo el input como email
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function showEditEmailBox(editobj,id) {
	$(editobj).prop('disabled','true');
	var currentMessage = $("#message_" + id + " .message-contentEmail").html();
	var editMarkUp = '<input required autofocus

type="email"

 name="email" class="form-control usuario" id="txtmessageEmail_'+id+'" value='+currentMessage+'><button class="btn btn-success btn-circle usuario" name="ok" onClick="callCrudAction(\'editEmail\','+id+')"><i class="fa fa-save"></i></button>';
	$("#message_" + id + " .message-contentEmail").html(editMarkUp);
}
 
function cancelEdit(message,id) {
	$("#message_" + id + " .message-contentEmail").html(message);
}
 
function callCrudAction(action,id) {
	$("#loaderIcon").show();
	var queryString;
	switch(action) {
		case "editEmail":
			queryString = 'action='+action+'&message_id='+ id + '&txtmessageEmail='+ $("#txtmessageEmail_"+id).val();
		break;
 
 
	}
	jQuery.ajax({
	url: "crud_actionUsuario.php",
	data:queryString,
	type: "POST",
	success:function(data){
		switch(action) {
			case "editEmail":
				$("#message_" + id + " .message-contentEmail").html(data);
				$("#message_"+id+" .btnEditEmailAction").prop('disabled','');
			break;
 
 
		}
		$("#txtmessageEmail").val('');
		$("#loaderIcon").hide();
	},
	error:function (){}
	});
}

Estos valores se van a crud_actionUsuario.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
require_once("../conexion/dbcontroller.php");
$db_handle = new DBController();
 
$action = $_POST["action"];
if(!empty($action)) {
	switch($action) {
 
		case "editEmail":
			$result = mysql_query("UPDATE USUARIO set EmailUsuario = '".$_POST["txtmessageEmail"]."' WHERE  IdUsuario=".$_POST["message_id"]);
			if($result){
				  echo $_POST["txtmessageEmail"];
			}
			break;	
	}
}
?>

Agradezco el apoyo que me puedan prestar en este caso
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Validar Input de Email

Publicado por Zausen (1 intervención) el 16/09/2017 01:07:54
No sé si entendí muy bien tu problema.

¿Lo que quieres es validar que te coloquen un mail, no?
Si entendí bien, yo lo que hago es usar una expresión regular, en javascript se podría hacer algo así:

1
2
3
4
5
6
7
var mail = $("#idInputMail");
var validadorEmail = /Expresiónregularemail$/;
 
if(!validadorEmail.test(mail)){
// Todo lo que pasa cuando el mail no es válido.
return; //por ejemplo.
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de ScriptShow

Validar Input de Email

Publicado por ScriptShow (471 intervenciones) el 16/09/2017 11:16:21
La Expresión Regular, por ejemplo:

1
var validadorEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,8})+$/;

Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de Carlos

Validar Input de Email

Publicado por Carlos (16 intervenciones) el 18/09/2017 18:27:35
Gracias por la expresion enviada, un abrazo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Carlos

Validar Input de Email

Publicado por Carlos (16 intervenciones) el 18/09/2017 18:27:09
Gracias amigo por la información pero con eso me surge la siguiente duda... en mi codigo no se exactamente cual es la variable email puesto que esta combinada con una variable que sale del resultado de una consulta. (El codigo no es mio, lo saque de un tuto xD), puedo deducir que la variable seria esta txtmessageEmail_'+id+, el otro tema es que necesito validar que cuando este en blanco me arroje un error tambien
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow

Validar Input de Email

Publicado por ScriptShow (471 intervenciones) el 19/09/2017 00:46:52
Saludos Carlos,

un ejemplo básico en JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
function check() {
var mail = document.getElementById("mail");
var filter = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,8})+$/;
if (!filter.test(mail.value) || mail.value == "") {confirm("Escribe un Email válido");return}
else {confirm("Email correcto ...");return}
}
</script>
 
<form>
<input type="text" id="mail" name="mail">
<input type="button" value="Enviar" onclick="check();this.blur()">
</form>

Si el Email es correcto y/o el campo no está vacío, se procesa el contenido del "ELSE".

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Carlos

Validar Input de Email

Publicado por Carlos (16 intervenciones) el 19/09/2017 19:38:53
Hola ScriptShow, gracias amigo lo intentare y estare notificando alguna duda
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar