Отправьте электронное письмо после подтверждения формы jQuery

Question

Im пытается создать скрипт подтверждения с jQuery, сообщения электронной почты, отправленного пользователем, на наш электронный адрес.

.php работает отлично, но jQuery не проверяет, пустые ли входы и отправляет их в любом случае.

Любая помощь?

HTML

<form onsubmit="return validateForm()" action="send.php" id="myform" method="post"> 
       <label>Your name: </label> 
        <input type="text" name="username" placeholder="Type your name" id="username" class="required"/> 
       <label>Your email: </label> 
        <input type="text" name="email" placeholder="Type your email address" id="email" class="required"/> 
       <label>Subject/Title: </label> 
        <input type="text" name="subject" placeholder="Title/Subject" class="required"/> 
       <label>Write us something: </label> 
        <textarea col="99" placeholder="Describe as detailed as possible, what you want us to do, for you. Send what you want and we will reply to you, as soon as possible!" id="message"></textarea> 
       <input type="submit" name="submit" value="Enviar" id="submit"/> 
      </form> 

      <div class="alert alert-warning hidden" id="warning">An error has occured! Please fill your email and message!</div> 
      <div class="alert alert-success hidden" id="success">Message sent! We will reply to you, as soon as possible!</div> 

JQuery

function validateForm() { 
    var x = document.forms["myform"]["message"].value; 

    if (x == null || x == ""){ 
     $("#warning").removeClass("hidden"); 
     $("#warning").addClass("show"); 
     $('#warning').delay(5000).fadeOut(500); 
     return false; 
    } 

    if (validateForm == true){ 
     $("#sucess").removeClass("hidden"); 
     $("#success").addClass("show"); 
     $('#sucess').delay(5000).fadeOut(500); 
     return true; 
    } 
} 

Answer 1

Если вы хотите просто проверить, если поле сообщения пусто ...

Попробуйте это:

Удалить onsubmit функцию из form тега

и вставить его на кнопку:

<input onclick="return validateForm();" type="submit" name="submit" value="Enviar" id="submit"/> 

JQuery:

function validateForm() { 
    if ($('#message').val() == ""){ 
     $("#warning").removeClass("hidden"); 
     $("#warning").addClass("show"); 
     $('#warning').delay(5000).fadeOut(500); 
     return false; 
    } 
    else { 
     return true; 
    } 
} 

Demo

Вы можете также использовать click FUNCT ионы в JQuery вместо того, чтобы onclick INLINE

Answer 2

var x = document.forms["myform"]["message"].value; 
            ^^^^^^^---array is built with "name" attributes 

<textarea col="99" ..snip.. id="message"></textarea> 
           ^^^^^^^-this is an ID, not a name 

Вашей области текста не имеют name атрибута, поэтому он не будет отображаться в массиве форм. А так как он имеет идентификатор, вы могли бы просто использовать

var x = document.getElementById('message').value; 

или даже

var x = $('#message').value(); 

Answer 3

Я не уверен, что вы подразумеваете под if(validateForm == true). Попробуйте это:

function validateForm() { 
    var x = $("#message").val(); 

    if (x == "") { 
     $("#warning").removeClass("hidden"); 
     $("#warning").addClass("show"); 
     $('#warning').delay(5000).fadeOut(500); 
     return false; 
    } 
    else { 
     $("#sucess").removeClass("hidden"); 
     $("#success").addClass("show"); 
     $('#sucess').delay(5000).fadeOut(500); 
     return true; 
    } 
} 

Working example