Member 14876064 Ответов: 2

Event.preventdefault не работает: как заставить его работать

Я делаю приложение для электронной почты. В котором сначала заполняются поля from и to, а затем, когда они нажимают кнопку Отправить эту ссылку через Ajax в php-скрипт, который затем отправляет электронное письмо и возвращает true, и приложение интерпретирует это как успешную отправку. Перед отправкой письма он проверяет форму, указаны ли все поля и правильно ли она заполнена.

Все работает, кроме темы и поля сообщения. Событие, если оно показывает сообщение об ошибке, все равно оно отправляет почту.

Это мой код.:

indexx.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
	<link rel="stylesheet" href="app.min.css">
	
	<style>
		
		.bgtrans{
			background: transparent;
			border: 0;
			padding: 0;
		}
		
		.success{
			color: #155724;
			padding: 8px;
			background-color: #d4edda;
            border-color: #c3e6cb;
		}
		
		.danger{
			padding: 8px;
			color: #721c24;
			background-color: #f8d7da;
			border-color: #f5c6cb;
		}
		
		@-webkit-keyframes pulse {
				0% {
					background-color: #CCC;
				}
				25% {
					background-color: #EEE;
				}
				50% {
					background-color: #CCC;
				}
				75% {
					background-color: #EEE;
				}
				100% {
					background-color: #CCC;
				}
			}
		
	</style>
	
</head>

<body>
	
	<div class="app-page" data-page="home">
		<div class="app-topbar blue">
			<div class="app-title">App Email</div>
		</div>
		
		<div class="app-content">
			<p class="app-section">Click below to send an email</p>
			
			<div class="app-section" id="contactList">
				
				
			</div>
		
		<div class="app-section">
			<div class="app-button green" id="newUser">Send to new user</div>
		</div>
			
		</div>
		
		
	</div>
	
	
	<div class="app-page" data-page="sendEmail">
		<div class="app-topbar blue">
			<div class="app-button right" data-back data-autotitle>Done</div>
			<div class="app-title">New User</div>
		</div>
		
		<div class="app-content">
			
			<div class="app-section" id="message">
			
			</div>
			
			<form name="myform" method="get"><!-- onSubmit="return validateForm();"-->
			<div class="app-section">
				<input type="text" name="from" id="from" class="app-input" placeholder="From">
			</div>
			
			<div class="app-section">
				<input type="text" name="to" id="to" class="app-input" placeholder="To">
			</div>
			
			<div class="app-section">
				<input type="text" name="subject" id="subject" class="app-input" placeholder="Subject">
				<textarea name="content" id="content" class="app-input" placeholder="Message"></textarea>
				<div class="app-button green app-submit" id="send">Send</div>
			</div>
			</form>
			
		</div>
	</div>
	
	
	<script src="zepto.js"></script>
	<script src="app.min.js"></script>
	
	
	<script type="text/javascript">
	    App.controller('home', function (page) {
    
          if (typeof localStorage !== 'undefined') {
              
              $(page).find("#newUser")
                .clickable()
                .click(function () {
                  
                  if (localStorage.getItem("to") !== null) {
                  
                      localStorage.removeItem("to");
                      
                      
                  }
                  
                  App.load("sendEmail");
                  
              })
              
              if (localStorage.getItem("recipient-list") !== null) {
                  
                  var recipientList = JSON.parse(localStorage.getItem("recipient-list"));
                  
                  $.each(recipientList, function( index, value ) {
                    
                      $(page).find("#contactList").append('<div class="app-button redirect">' + value + '</div>');
                
                  });
                  
                  $(page).find("#contactList").show();
                  
                  $(page).find(".redirect")
                      .clickable()
                      .on("click", function() {
                      
                      localStorage.setItem("to", $(this).html());
                      
                      App.load('sendEmail');
                      
                      
                      
                  });
                  
                  
              } else {
                  
                  $(page).find("#contactList").hide();
                  
              }
              
              
          }
          
      });
        
        App.controller('sendEmail', function (page) {
            
            $(page).find("#message").hide();
            
            if (typeof localStorage !== 'undefined') {
                
                if (localStorage.getItem("from") !== null) {
                    
                    
                    $(page).find("#from").val(localStorage.getItem("from"));
                    
                }
                
                if (localStorage.getItem("to") !== null) {
                    
                    $(page).find("#to").val(localStorage.getItem("to"));
                    
                }
                
            }
            
            
            
          $(page).find('#send')
					.clickable()
					.on('click', function (event) {
			
		event.preventDefault();
              
                 $.ajax({
  type: 'GET',
  url: 'http://apsecoglobalwarming-com.stackstaging.com/EmailClientApp/sendEmail.php?callback=response',
  // data to be added to query string:
  data: { to: $("#to").val(), from: $("#from").val(), subject: $("#subject").val(), content: $("#content").val()},
  // type of data we are expecting in return:
  dataType: 'jsonp',
  timeout: 300,
  context: $('body'),
  success: function(data){
    
      if (data.success == true) {
		      $(page).find("#message").removeClass("danger");
			  $(page).find("#message").addClass("success").text("Your email was sent successfully!").show();
		
          
		  
          
      } else {
          
          $(page).find("#message").addClass("danger").text("Your email could not be sent - please try again later.");
          
      }
      
      
  },
  error: function(xhr, type){
   
        $(page).find("#message").addClass("danger").text("Your email could not be sent - please try again later.");  
      
  }
})
    
          validateForm();
			  
			
			  
              
          });
			
			
			
		function validateForm(){
			
			
              if (typeof localStorage !== 'undefined') {
				  
				 
				
				  var re = /^\w+([-+.'][^\s]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

				  var emailFormat = re.test($("#to").val());
				  var emailFormatB = re.test($("#from").val());
				  
				  
				  if($('#from').val() == 0 || $('#to').val() == 0 /*|| $('#subject').val() == 0 || $('#content').val() == 0*/){
						            $(page).find("#message").addClass("danger").text("All the fields are required").show();
					                return false;
						  }
						  else if(!emailFormatB) {
									$(page).find("#message").addClass("danger").text("Invalid Email").show();
                                    return false;

						  }
				          else if(!emailFormat){
							  		$(page).find("#message").addClass("danger").text("Invalid Email").show();
                                    return false;
						  }
				  else if($('#subject').val() == 0){
					  $(page).find("#message").addClass("danger").text("Subject field is required").show();
					                return false;
				  }
				  
				   else if($('#content').val() == 0){
					  $(page).find("#message").addClass("danger").text("content field is required").show();
					                return false;
				  }
				         
						  
				
				  else{
					  
					  $(page).find("#message").text("").hide();
					  localStorage.setItem("from",$("#from").val());	 
					  
						 var recipientList = new Array();

						  if (localStorage.getItem("recipient-list") !== null) {

							  recipientList = JSON.parse(localStorage.getItem("recipient-list"));

						  }

						  if ($.inArray($("#to").val(), recipientList) == -1) {

							  if($("#to").val() == 0){
								  
								  //var recipientList = new Array();
									var removeItem = $("#to").val();

									var i = $.inArray(removeItem,recipientList)

									if (i){
										recipientList.splice(i, 1);
									}

								 }
							 else{
								 	recipientList.push($("#to").val());

								  recipientList.sort();

								  localStorage.setItem("recipient-list", JSON.stringify(recipientList));

								  console.log(recipientList);
							 }

						  }
					  
				  }
				  
				  
				
			
                  
              } else {
                  
                  // alert user that we couldn't save data
                  
              }
			 }
		
			
			
      });
        
       

      try {
        App.restore();
      } catch (err) {
        App.load('home');
      }
	
	
	</script>
</body>
</html>




sendEmail.php

<?php
$to = $_GET["to"];
$subject = $_GET["subject"];
$content = $_GET["content"];
$headers = "From: " .$_GET["from"]. "\r\n" .
"Reply-To: ".$_GET["from"]. "\r\n".
    'X-Mailer: PHP/' . phpversion();


$result = array();
$result['success'] = mail($to, $subject, $content, $headers);
$result2 = json_encode($result);

if(array_key_exists('callback', $_GET)){

    header('Content-Type: text/javascript; charset=utf8');
    header('Access-Control-Allow-Origin: http://www.example.com/');
    header('Access-Control-Max-Age: 3628800');
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');

    $callback = $_GET['callback'];
    echo $callback.'('.$result2.');';

}else{
    // normal JSON string
    header('Content-Type: application/json; charset=utf8');

   // echo $result2;
}



?>


Что я уже пробовал:

Даже я пытался проверить его на php в sendEmail.php-да. Но он не показывает сообщения об ошибках. Подобный этому:

функция sanitize_my_email($field) {
$field = filter_var($field, FILTER_SANITIZE_EMAIL);
if (filter_var($field, FILTER_VALIDATE_EMAIL)) {
вернуть true;
} еще {
возвращать false;
}
}
$добраться"];
$subject = $_GET["subject"];
$content = $_GET["content"];
$headers = "From:" .$_GET["from"]. "\r\n" .
"Ответ: ".$Запросе["с"]. "\r\n".
'X-Mailer: PHP/' . phpversion();
//проверьте, является ли адрес электронной почты недействительным $secure_check
$secure_check = sanitize_my_email (долл);
если (secure_check $ = = ложь) {
echo "недопустимый ввод";
}
еще если($subject == ""){
Эхо "введите тему";
}
иначе если($content == ""){
echo "введите содержимое";
}
еще {

$результирующий массив();
$результат['успех'] = Почта($к, $тема, $содержание $заголовки);
$результат2 = json_encode($результат);


if(array_key_exists('callback', $_GET)){

заголовок('Content-Type: text/javascript; charset=utf8');
доступ-контроля-разрешить-происхождение заголовка (': http://www.example.com/');
заголовок('Access-Control-Max-Age: 3628800');
доступ-контроля-разрешить-методы заголовка (': вам, пост, ставить, удалять');

$обратного вызова = параметр $_GET['обратного вызова'];
$обратного вызова.'('.$результат2'.);';

}еще{
// обычная строка JSON
заголовок('Content-Type: application/json; charset=utf8');

Эхо $результат2;
}


}

Но ничего не получается. Любая помощь будет оценена по достоинству.

Спасибо

2 Ответов

Рейтинг:
1

Richard MacCutchan 

if($('#from').val() == 0 || $('#to').val() == 0 /*|| $('#subject').val() == 0 || $('#content').val() == 0*/){

Проверки по теме и содержанию были прокомментированы.

Рейтинг:
0

Member 14876064

Спасибо за ответ.
Да, я прокомментировал, потому что это не сработало, и вместо этого записал его. Подобный этому:

else if($('#subject').val() == 0){
$(страницы).найти ("сообщение#").добавление("опасность").текст("поля требуется").показать();
возвращать false;
}

else if($('#content').val() == 0){
$(страницы).найти ("сообщение#").добавление("опасность").текст("поле" содержание "необходимо").показать();
возвращать false;
}

Но все равно это не работает. Он показывает сообщения об ошибках, но все равно отправляет почту. Функция event.preventDefault() работает неправильно.