Javascript/PHPを使用したHTMLフォーム検証

Question

PHP経由でフォームデータを電子メールで送信する基本的な連絡フォームを設定しました。これはうまく動作しますが、データが入力されていないときにフォームが送信されるのを防ぐために、検証スクリプトをコードにインテグレートするのに問題があります。

私のコードは、これまでのところです：

$(document).ready(function() { 
$("#form1").validate({ 
    submitHandler: function() { 
     //submit the form 
$.post("<?php echo $_SERVER[PHP_SELF]; ?>", //post 
      $("#form1").serialize(), 
      function(data){ 
       //if message is sent 
       if (data == 'Sent') { 
       $("#message").fadeIn(); //show confirmation message 

      } 
      // 
     }); 
     return false; //don't let the page refresh on submit. 
    } 
}); //validate the form 
}); 

HTMLフォーム

<div id="contact-form"> 
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> 

<input type="text" id="name" name="name"/> 
<input type="text" id="email" name="email"/> 
<input name="submit" type="submit" title="Submit" class="submit_go" value="Submit"/> 

</form> 
<div id="message">Thank you for your message</div> 
</div> 

I：フォームを投稿する

<?php 
//validate 
if(isset($_POST['submit'])) 
{ 
$to="email@testemail.com"; 
$name=$_REQUEST['name']; 
$email=$_REQUEST['email']; 
$subject="Contact Us"; 
$body="Name: $name \n\n Email Address: $email \n\n"; 
$sent=mail($to, $subject, $body); 
echo 'Sent'; die; 
} 
// 
?> 

JS：

PHPはデータをメールで送信します以下の値を統合しようとしましたidationスクリプトですが、フォームが送信されるのを妨げるものではありませんか？

検証スクリプト

function leftValue(e, t, n) { 
$(this).text(t.parent()[0].style.left) 
} 
$(document).ready(function() { 
required = ["name", "email"]; 
email = $("#email"); 
errornotice = $("#error"); 
emptyerror = "Required Field"; 
emailerror = "Required Field"; 
$("#form1").submit(function() { 
    for (i = 0; i < required.length; i++) { 
     var e = $("#" + required[i]); 
     if (e.val() == "" || e.val() == emptyerror) { 
      e.addClass("form-error"); 
      e.val(emptyerror); 
      errornotice.fadeIn(750) 
     } else { 
      e.removeClass("form-error") 
     } 
    } 
    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA- Z0-9]{2,4})+$/.test(email.val())) { 
     email.addClass("form-error"); 
     email.val(emailerror) 
    } 
    if ($(":input").hasClass("form-error")) { 
     return false 
    } else { 
     errornotice.hide(); 
     return true 
    } 
}); 
$(":input").focus(function() { 
    if ($(this).hasClass("form-error")) { 
     $(this).val(""); 
     $(this).removeClass("form-error") 
    } 
}) 
}); 

Answer 1

クライアントでの検証とは別に、実際にサーバー側で検証を行う必要があります（PHPで）。クライアント側の検証が行われる（ユーザーがJavaScriptを完全に無効にしたことさえあるかもしれない）ことや、ページからの入力はまったく保証されません。

クライアント側の検証：実際のセキュリティと保護が起こる：ユーザー

サーバー側の検証のための目キャンデー。

FWIW：html5では、ブラウザによるクライアント側の検証が可能です。

<form [...]> 
    <input type="text" id="name" name="name" required="required" placeholder="Name" minlength="2" /> 
    <input type="email" id="email" name="email" required="required" placeholder="Email" /> 
    <input name="submit" type="submit" title="Submit" class="submit_go" value="Submit" /> 
</form> 

さらに詳しい情報：先端のための

• https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation
• https://html.spec.whatwg.org/multipage/forms.html

Answer 2

それはちょうど>$("input").hasClass("form-error")$(":input").hasClass("form-error")ような単純なものかもしれません。私はこれが動作しないようにする何かを見ません。

私は別のルートを提案しますが。入力にクラスform-errorを追加するのではなく、最後にそのクラスの入力を探してエラーがあるかどうかを判断し、エラーがあったことを示すブーリアンフラグを設定しないでください。そうすれば、高価な操作である追加のDOMルックアップはありません。

$("#form1").submit(function() { 
    var isValid = true; 
    for (i = 0; i < required.length; i++) { 
     var e = $("#" + required[i]); 
     if (e.val() == "" || e.val() == emptyerror) { 
      e.addClass("form-error"); 
      e.val(emptyerror); 
      errornotice.fadeIn(750); 
      isValid = false; 
     } else { 
      e.removeClass("form-error") 
     } 
    } 
    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA- Z0-9]{2,4})+$/.test(email.val())) { 
     email.addClass("form-error"); 
     email.val(emailerror); 
    } 
    if (!isValid) { 
     return false; 
    } else { 
     errornotice.hide(); 
     return true; 
    } 
});