Como puedo quitarle la parte coloreada a un campo de este formulario:
<html>
<head>
<script>
function comprobar(){var mal=false;
numero=document.forms[0].elements.length;
for(a=0;a<numero;a++){
if (document.forms[0].elements[a].value==""){document.forms[0].elements[a].style.backgroundColor="#ffffcc";mal=true;}
else{document.forms[0].elements[a].style.backgroundColor="white";}
}
if(mal){alert("Por favor, rellene las cajas coloreadas");}
else{document.forms[0].submit()}
}
</script>
</head>
<body>
<form action="javascript:alert('enviando')"
method="post"
name="formulario"
id="formulario"
style="font:normal 10px/10px verdana;border:solid 1px black;text-align:right;width:300px;"
>
Nombre: <input type="text"
name="cosa"
id="cosa"><br>
Apellidos: <input type="text"
name="cosa"
id="cosa"><br>
Dirección: <input type="text"
name="cosa"
id="cosa"><br>
Nombre del perro: <input type="text"
name="cosa"
id="cosa"><br>
Pais: <input type="text"
name="cosa"
id="cosa"><br>
Conocidos con perro: <input type="text"
name="cosa"
id="cosa"><br>
<input onclick="comprobar()"
type="button"
name="enviar"
value="Enviar!">
</form>
</body>
</html>
Estoy que me meto un tiro, ya no se que hacer. A ver si me pueden ayudar ustedes.
Los que busco es que dos de los campos del Formulario no queden vacios y mucho menos que se envien, y los otros campos no importan si son ó no llenados.
Vale!! saludos
en tu formulario:
<?php
session_start ();
//Validacion de datos enviados
if(isset($_POST['send'])){
if(!validateUsername($_POST['username']))
$username = "error";
if(!validateUsername2($_POST['username2']))
$username2 = "error";
if(!validatePassword1($_POST['password1']))
$password1 = "error";
if(!validatePassword2($_POST['password1'], $_POST['password2']))
$password2 = "error";
if(!validateEmail($_POST['email']))
$email = "error";
if(!validatenum_doc($_POST['num_doc']))
$num_doc = "error";
if(!validategenero($_POST['genero']))
$genero = "error";
if(!validatefecha_nac($_POST['dia']))
$fecha_nac = "error";
//Guardamos valores para que no tenga que reescribirlos
$usernameValue = $_POST['username'];
$usernameValue2 = $_POST['username2'];
$emailValue = $_POST['email'];
//Comprobamos si todo ha ido bien
if($username != "error" && $username2 != "error" && $password1 != "error" && $password2 != "error" && $email != "error")
$status = 1;
}
?>
<?php if(!isset($status)): ?>
<form action="login_iframe.php">
<label for="username">Nombres* (solo se admiten caracteres A-z):</label>
<input name="username" type="text" class="text <?php echo $username ?>" id="username" value="<?php echo $_SESSION["username"]; ?>" maxlength="100" />
<span id="req-username" class="requisites <?php echo $username ?>"><font color=#FFFFFF>Ingrese o corrija este campo.</font></span>
<label for="username2">Apellidos* (solo se admiten caracteres A-z):</label>
<input name="username2" type="text" class="text <?php echo $username2 ?>" id="username2" value="<?php echo $_SESSION["username2"]; ?>" maxlength="100" />
<span id="req-username2" class="requisites <?php echo $username2 ?>"><font color=#FFFFFF>Ingrese o corrija este campo.</font></span>
<?php else: ?>
<center><h1>¡Formulario enviado con éxito!</h1></center>
<?php endif; ?>
en la libreria javascript las validaciones: (main.js)
$(document).ready(function(){
//variables globales
var searchBoxes = $(".text");
var inputUsername = $("#username");
var reqUsername = $("#req-username");
var inputUsername2 = $("#username2");
var reqUsername2 = $("#req-username2");
function validateUsername(){
//NO cumple longitud minima
if(inputUsername.val().length < 3){
reqUsername.addClass("error");
inputUsername.addClass("error");
return false;
}
//SI longitud pero NO solo caracteres A-z
else if(!inputUsername.val().match(/^[a-zA-Z ñáéíóú]+$/)){
reqUsername.addClass("error");
inputUsername.addClass("error");
return false;
}
// SI longitud, SI caracteres A-z
else{
reqUsername.removeClass("error");
inputUsername.removeClass("error");
return true;
}
}
function validateUsername2(){
//NO cumple longitud minima
if(inputUsername2.val().length < 3){
reqUsername2.addClass("error");
inputUsername2.addClass("error");
return false;
}
//SI longitud pero NO solo caracteres A-z
else if(!inputUsername2.val().match(/^[a-zA-Z ñáéíóú]+$/)){
reqUsername2.addClass("error");
inputUsername2.addClass("error");
return false;
}
// SI longitud, SI caracteres A-z
else{
reqUsername2.removeClass("error");
inputUsername2.removeClass("error");
return true;
}
}
//**************************************************
//controlamos la validacion en los distintos eventos
// Perdida de foco
inputUsername.blur(validateUsername);
inputUsername2.blur(validateUsername2);
// Pulsacion de tecla
inputUsername.keyup(validateUsername);
inputUsername2.keyup(validateUsername2);
// Envio de formulario
$("#form1").submit(function(){
if(validateUsername() & validateUsername2() )
return true;
else
return false;
});
//controlamos el foco / perdida de foco para los input text
searchBoxes.focus(function(){
$(this).addClass("active");
});
searchBoxes.blur(function(){
$(this).removeClass("active");
});
});
un CSS para asignar los colores de error, cuando han dejado el campo sin llenar:
.requisites{
padding: 0 2px 0 2px;
}
.requisites.error{
background: #a7c600;
color: #171717;
}
input.error{
background: #a7c600;
border-color: #171717;
}