0

No encuentro el error acá porque no lo manda al correo que esta declarado en action

function validar() {

  if (valor = document.getElementById("name").value;

    if (valor == null || valor.length == 0 || /^\s+$/.test(valor)) {
      return false;
    }) {

    alert('Error Debe ingresar texto y no espacios en blanco');
    return false;
  } else if (valor = document.getElementById("mail").value;
    if (!(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)/.test(valor))) {
      return false;
    }) {

    alert('[ERROR] El campo solicita un mail valido');
    return false;
  }
}
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
html {
  background: url(guitarra.jpeg) no-repeat;
  background-size: cover;
  height: 100%;
}

#feedback-page {
  text-align: center;
}

#form-main {
  width: 100%;
  float: left;
  padding-top: 0px;
}

#form-div {
  background-color: rgba(72, 72, 72, 0.4);
  padding-left: 35px;
  padding-right: 35px;
  padding-top: 35px;
  padding-bottom: 50px;
  width: 450px;
  float: left;
  left: 50%;
  position: absolute;
  margin-top: 30px;
  margin-left: -260px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
}

.feedback-input {
  color: #3c3c3c;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 18px;
  border-radius: 0;
  line-height: 22px;
  background-color: #fbfbfb;
  padding: 13px 13px 13px 54px;
  margin-bottom: 10px;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid rgba(0, 0, 0, 0);
}

.feedback-input:focus {
  background: #fff;
  box-shadow: 0;
  border: 3px solid #3498db;
  color: #3498db;
  outline: none;
  padding: 13px 13px 13px 54px;
}

.focused {
  color: #30aed6;
  border: #30aed6 solid 3px;
}


/* Icons ---------------------------------- */

#name {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#name:focus {
  background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
  background-size: 30px 30px;
  background-position: 8px 5px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#email {
  background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#email:focus {
  background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

#comment {
  background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
  background-size: 30px 30px;
  background-position: 11px 8px;
  background-repeat: no-repeat;
}

textarea {
  width: 100%;
  height: 150px;
  line-height: 150%;
  resize: vertical;
}

input:hover,
textarea:hover,
input:focus,
textarea:focus {
  background-color: white;
}

#button-blue {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  float: left;
  width: 100%;
  border: #fbfbfb solid 4px;
  cursor: pointer;
  background-color: #3498db;
  color: white;
  font-size: 24px;
  padding-top: 22px;
  padding-bottom: 22px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  margin-top: -4px;
  font-weight: 700;
}

#button-blue:hover {
  background-color: rgba(0, 0, 0, 0);
  color: #0493bd;
}

.submit:hover {
  color: #3498db;
}

.ease {
  width: 0px;
  height: 74px;
  background-color: #fbfbfb;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  -ms-transition: .3s ease;
  transition: .3s ease;
}

.submit:hover .ease {
  width: 100%;
  background-color: white;
}

@media only screen and (max-width: 580px) {
  #form-div {
    left: 3%;
    margin-right: 3%;
    width: 88%;
    margin-left: 0;
    padding-left: 3%;
    padding-right: 3%;
  }
}
<div id="form-div">
  <form id="Formulario" action="[email protected]" method="post" onsubmit="return validar(this)  >    
      <p class=" name ">
        <input name="name " type="text " class="validate[required,custom[onlyLetter],length[0,100]] feedback-input " placeholder="Name " id="name " />
      </p>
      
      <p class="email ">
        <input name="email " type="text " class="validate[required,custom[email]] feedback-input " id="email " placeholder="Email " />
      </p>
      
      <p class="text ">
        <textarea name="text " ></textarea>
      </p>
      
      
      <div class="submit ">
        <input type="submit " value="SEND " id="button-blue "/>
        <div class="ease "></div>
      </div>
    </form>
  </div>

2 respuestas 2

1

La verdad es que hay bastantes errores.

En el HTML:

  • te falta cerrar las comillas del atributo onsubmit
  • La función validar no recibe parámetros por lo que debería ser onsubmit="return validar();"
  • En el type del botón de envío te sobra un espacio (debería ser type="submit")
  • También te sobra un espacio en el id del input del nombre (debería ser id="name")

En el javascript:

  • la declaración de la variable valor no deberías incluirla en un if
  • Es recomendable que las comparaciones las hagas con === en lugar de == (excepto en el caso del null si quieres contemplar el caso de que el valor pueda ser undefined)
  • Las llaves y los paréntesis de cierre no coinciden con los de apertura.
  • El alert que muestra el mensaje de error debe estar antes de la instrucción return false
  • Si la validación es correcta deberías devolver un true.

El javascript debería quedarte algo así:

function validar() {
  var valor = document.getElementById("name").value;

  if (valor == null || valor.length === 0 || /^\s+$/.test(valor)) {
	  alert('Error Debe ingresar texto y no espacios en blanco');
      return false;
  }
  if (!(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)/.test(valor))) {
      alert('[ERROR] El campo solicita un mail valido');
      return false;
  }
  return true;
}

1

A ver, ya en el principio del script de javascript tienes un error, fijate en esta línea. Tienes un lío entre llaves y corchete

if (valor = document.getElementById("name").value;

No cierras el valor del IF.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.