그래서 나는 이름 필드의 유효성을 검사하는 JavaScript 코드가 있습니다.이 작업을 마치면 유효성 검사를 더 추가하고 있습니다.
따라서 기본적으로 필드가 채워지지 않으면 false를 반환합니다. true가 반환되면 email.php로 계속 이동하여 이메일을 보냅니다. 유일한 문제는 설정된 주소로 이메일을 보내지 않는 것입니다. 나는 내가 어디에서 잘못했는지 혼란 스럽습니다.
필드가 비어 있고 입력이있을 때 JavaScript가 작동합니다. 도움.
추신 : 개인 정보 보호를 위해 이메일 주소를 삭제했습니다.
contact.html의 JavaScript :
<script>
function validateForm() {
if (document.forms['email'].fname.value == ""){
alert("First name must be filled out");
return false;
}
else{
alert("Thank you! Your message was recieved!");
return true;
}
};
</script>
contact.html의 HTML 양식
<form id="email" name="email" onsubmit="return validateForm(this)" action="email.php" method="post" >
<div id="form_fname">
<label for="fname"><img src="images/firstname.png" width="94" height="17" alt="first name" /></label>
<input type="text" name="fname" id="fname" />
</div>
<div id="form_lname">
<label for="lname"><img src="images/lastname.png" width="89" height="17" alt="last name" /></label>
<input type="text" name="lname" id="lname" />
</div>
<div id="form_email">
<label for="email"><img src="images/email.png" width="53" height="17" alt="email" /></label>
<input type="text" name="email" id="email" />
</div>
<div id="form_message">
<label for="Message"><img src="images/message.png" width="77" height="17" alt="message" /></label>
<textarea name="message" id="message" cols="45" rows="5"></textarea>
</div>
<div id="form_submit">
<input type="submit" name="submit" id="submit" value=""/>
</div>
</form>
email.php의 PHP
<?php
if(isset($_POST['email'])) {
// Email and subject.
$email_to = "emailaddress";
$email_subject = "Mint Makeup & Beauty Enquiry";
$fname = $_POST['fname']; // required
$lname = $_POST['lname']; // required
$message = $_POST['message']; // required
$email_from = $_POST['email']; // required
// create email content
$email_content = "From:"." ".$fname." ".$lname."\n"."Email:"." ".$email_from."\n"."Message:"." ".$message;
//mail
mail($email_to, $email_subject, $email_content);
}
//return to contact page after submit.
header("location:contact.html");
?>
양식에서 id = "email"이 입력 id = "email"과 충돌합니다.
양식 유효성 검사에 HTML5 속성을 사용할 수 있습니다 (HTML5 지원 브라우저에서).
http://www.the-art-of-web.com/html/html5-form-validation/#.UnDpBHMW3eU
암호
<?php
if(isset($_POST['submit'])) {
print_r($_POST);
die;
$email_to = "emailaddress";
$email_subject = "Mint Makeup & Beauty Enquiry";
$fname = $_POST['fname']; // required
$lname = $_POST['lname']; // required
$message = $_POST['message']; // required
$email_from = $_POST['email']; // required
// create email content
$email_content = "From:"." ".$fname." ".$lname."\n"."Email:"." ".$email_from."\n"."Message:"." ".$message;
mail($email_to, $email_subject, $email_content);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function validateForm() {
var error = false;
var error_string = 'Please correct the following errors:\n\n';
if (document.getElementById('fname').value == ""){
error_string += "--> First name must be filled out.\n";
error = true;
}
if (document.getElementById('lname').value == ""){
error_string += "--> Last name must be filled out.\n";
error = true;
}
if (document.getElementById('email').value == ""){
error_string += "--> Email must be filled out.\n";
error = true;
}
if(error){
alert(error_string);
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<form onsubmit="return validateForm(this)" action="" method="post" >
<div id="form_fname">
<label for="fname"><img src="images/firstname.png" width="94" height="17" alt="first name" /></label>
<input type="text" name="fname" id="fname" />
</div>
<div id="form_lname">
<label for="lname"><img src="images/lastname.png" width="89" height="17" alt="last name" /></label>
<input type="text" name="lname" id="lname" />
</div>
<div id="form_email">
<label for="email"><img src="images/email.png" width="53" height="17" alt="email" /></label>
<input type="text" name="email" id="email" />
</div>
<div id="form_message">
<label for="Message"><img src="images/message.png" width="77" height="17" alt="message" /></label>
<textarea name="message" id="message" cols="45" rows="5"></textarea>
</div>
<div id="form_submit">
<input type="submit" name="submit" id="submit" value="Submit" />
</div>
</form>
</body>
</html>
클라이언트 측 유효성 검사가 어떻게 작동하고 양식이 올바르게 게시되는지 보여 드렸습니다. 항상 서버 측 유효성 검사를 사용해야합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다