0
私の連絡フォームをチェックして送信する作業中のJavaスクリプト検証コードがあります。フォームを送信すると、正しく、それは私の電子メールに詳細を送信します。私はどのように自分のJavaスクリプトと私のPHPの検証を含めると、成功のメッセージを表示する方法がわからない。私はこれまで持っていることは次のとおりです。JavaScriptフォームの上にsuccesメッセージを含むPHPフォームの検証を追加する
HTML：
<form id="mc-form" method="POST">
<div class="form-group col-xs-12 ">
<label for="name" hidden>שם פרטי</label>
<input type="text" name="name" id="name" class="cv form-control" placeholder="שם פרטי">
<span class='error-message' id='name-error'></span>
</div>
<div class="form-group col-xs-12 ">
<label for="phone" hidden>טלפון</label>
<input type="text" name="phone" id="phone" class="cv form-control" placeholder="טלפון">
<span class='error-message' id='phone-error'></span>
</div>
<div class="form-group col-xs-12 ">
<label for="email" hidden>דואר אלקטרוני</label>
<input type="email" name="email" id="email" class="cv form-control" placeholder="דואר אלקטרוני">
<span class='error-message' id='email-error'></span>
</div>
<div class="form-group col-xs-12 ">
<label for="subject" hidden>נושא</label>
<input type="text" name="subject" id="subject" class="cv form-control" placeholder="נושא">
</div>
<div class="form-group col-xs-12 ">
<label for="message" hidden>הודעה</label>
<textarea name="message" id="message" class="cv form-control message" placeholder="השאירו את הודעתכם פה" rows="4" cols="50"></textarea>
</div>
<!-- <input type="submit" id="submit-button" class="btn btn-custom-outline " value="שלח" > -->
<button onclick='return validateForm()' class="btn btn-custom-outline " id="submit-button">שלח</button>
<span class='error-message' id='submit-error'></span>
<span class="success">Thank's for submitting the form</span>
<br>
<!-- <div class="success"><?= $success ?></div>-->
<!--<span class="error"></span> -->
</form>
マイJS：
function validateName() {
var name = document.getElementById('name').value;
if (name.length == 0) {
producePrompt('Name is required', 'name-error', 'red')
return false;
}
if (!name.match(/^[a-zא-ת]+(\s[a-zא-ת]+)*$/i)) {
producePrompt('Letters only please.', 'name-error', 'red');
return false;
}
return true;
}
function validatePhone() {
var phone = document.getElementById('phone').value;
if (phone.length == 0) {
producePrompt('Phone number is required.', 'phone-error', 'red');
return false;
}
if (!phone.match(/([0-9\s\-]{7,})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$/)) {
producePrompt('Include only digits| min :8 ', 'phone-error', 'red');
return false;
}
return true;
}
function validateEmail() {
var email = document.getElementById('email').value;
if (email.length == 0) {
producePrompt('Email is required', 'email-error', 'red');
return false;
}
if (!email.match(/^[A-Za-z\._\-[0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/)) {
producePrompt('Email Invalid', 'email-error', 'red');
return false;
}
return true;
}
/*function validateMessage() {
var message = document.getElementById('contact-message').value;
var required = 30;
var left = required - message.length;
if (left > 0) {
producePrompt(left + ' more characters required','message-error','red');
return false;
}
producePrompt('Valid', 'message-error', 'green');
return true;
}*/
function validateForm() {
var vn = validateName();
var vp = validatePhone();
var ve = validateEmail();
if (!vn || !vp || !ve) {
jsShow('submit-error');
producePrompt('Please fix errors to submit.', 'submit-error', 'red');
setTimeout(function() {
jsHide('submit-error');
}, 2000);
return false;
} else {
}
}
function jsShow(id) {
document.getElementById(id).style.display = 'block';
}
function jsHide(id) {
document.getElementById(id).style.display = 'none';
}
function producePrompt(message, promptLocation, color) {
document.getElementById(promptLocation).innerHTML = message;
document.getElementById(promptLocation).style.color = color;
}
PHP：
// define variables and set to empty values
$name_error = $email_error = $phone_error = " ";
$name = $email = $phone = $message = $subject = $success = " ";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["name"])) {
$name_error = "Name is required";
} else {
$name = test_input($_POST["name"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Zא-ת ]*$/",$name)) {
$name_error = "Only letters and white space allowed";
}
}
if (empty($_POST["email"])) {
$email_error = "Email is required";
} else {
$email = test_input($_POST["email"]);
// check if e-mail address is well-formed
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$email_error = "Invalid email format";
}
}
if (empty($_POST["phone"])) {
$phone_error = "Phone is required";
} else {
$phone = test_input($_POST["phone"]);
// check if e-mail address is well-formed
if (!preg_match("/^(\d[\s-]?)?[\(\[\s-]{0,2}?\d{3}[\)\]\s-]{0,2}?\d{3}[\s-]?\d{4}$/i",$phone)) {
$phone_error = "Invalid phone number";
}
}
if (empty($_POST["subject"])) {
$subject = "";
} else {
$subject = test_input($_POST["subject"]);
}
if (empty($_POST["message"])) {
$message = "";
} else {
$message = test_input($_POST["message"]);
}
if ($name_error == '' and $email_error == '' and $phone_error == '' and $lastname_error == ''){
$message_body = '';
unset($_POST['submit']);
foreach ($_POST as $key => $value){
$message_body .= "$key: $value\n";
}
$to = '[email protected]';
$subjectm = 'Contact Form Submit';
if (mail($to, $subjectm, $message)){
$success = "Message sent, thank you for contacting us!";
$name = $lastName = $email = $phone = $message = $subject = '';
}
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
私は私をチェックする作業のJavaスクリプトの検証コードを持っています私はフォームを送信した後に成功メッセージを表示するPHPでサーバー側の検証を追加したいそれは私の電子メールに詳細を送信します。私はどのように自分のJavaスクリプトと私のPHPの検証を含めると、どのように成功のメッセージを表示すると思いますか分かりません。私が今までに持っているものは：
あなたはPHPでの '$のSUCCESS'変数を作成しますが、あなたのコードでそれを使用していないのに役立ちます。 – panther
javascriptとphpの両方で同じスタイルの成功メッセージが表示されるようにするには、ajaxでそれを行う必要があります。 –
@私が理解できるようにいくつかのコード例を含めてください。 – SemSam