Why can not I validate this form?

Question

Why can not I validate this form?

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I can not find the error here because it does not send it to the mail that is declared in 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>

javascript html5 css3

asked by Diego 05.05.2016 в 12:51

source

2 answers

1

Let's see, already at the beginning of the javascript script you have an error, look at this line. You have a mess between braces and bracket

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

You do not close the value of the IF.

answered by 05.05.2016 в 12:58

Disable button Modal Bootstrap is only shown once as modal

score 1 · Accepted Answer

The truth is that there are enough errors.

In the HTML:

you still need to close the quotes of the onsubmit attribute
The validate function does not receive parameters, so it should be onsubmit="return validate ();"
In the type of the send button you have a space left over (it should be type="submit")
You also have a space left in the id of the name input (it should be id="name")

In javascript:

the declaration of the variable value should not include it in an if
It is recommended that comparisons be made with === instead of == (except in the case of null if you want to contemplate the case that the value can be undefined)
The keys and closing parentheses do not coincide with the opening brackets.
The alert that shows the error message must be before the return false statement
If the validation is correct, you should return a true.

The javascript should stay something like this:

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