複数のフィールドをJavascriptを使用してWordpress HTMLフォームで検証しようとしています

Question

ニュースレターのサインアップ用に2つのフィールドHTMLフォームがあります。 1つのフィールドはファーストネーム用で、もう1つはメール用フィールドです。

両方のフィールドが入力されていることと、有効なメールアドレスに対しても検証したいと考えています。

私は比較的初心者ですが、コードを読んだり、読んだり、調査したり、ビデオを見たりして遊んだりできましたが、私が達成できた最高のものは、www.w3schools.comから借りた電子メールの検証です。

私は私のWordpressのheader.phpのファイルを持っているコードは

<script type="text/javascript"> 
function validateForm() { 
var x=document.forms["newslettersignup"]["bm_email"].value; 
var atpos=x.indexOf("@"); 
var dotpos=x.lastIndexOf("."); 

    if (atpos<1 || dotpos<atpos+2 || dotpos+1>=x.length) 
    { 
    alert("Please enter a valid e-mail address"); 
    return false; 
    } 
} 
</script> 

であると私は、フォームを表示するWordpressのページのボディ内のコードは

<form name="newslettersignup" action="/wp-content/plugins/pommo/user/process.php" onsubmit="return validateForm()" method="POST"> 


Name<input type="text" class="text" style="width: 150px;" name="d[1]" id="d[1]"/> 

Email<input type="text" class="text" style="width: 150px;" name="bm_email" id="bm_email" value="" />  

</form> 

ものは何でも私です2つのフィールドの空のフィールドの検証を追加することに関して上記の作業を停止しようとしました。それが上にあるように私はそれを持っているとき、警告は完全に働く。

複数のフィールドを検証するためにネット上の多数の例のいずれかを使用しないようにするWordpressのことですか？

ありがとうございました。

Answer 1

WordpressにはjQueryが付属していますので、代わりにフォームの検証に使用します。 jQueryはjavascriptですが、その構文は従うのが簡単で、異なるブラウザのバージョン間で正規化するのにも役立ちます。ここでご利用の場合の例である：

http://jsfiddle.net/khVtB/

<!-- I added id's so it would be easy to get your form elements. I noticed that you used brackets in your ids. I think this is illegal. Use letters and numbers. --> 
<form name="newslettersignup" action="/wp-content/plugins/pommo/user/process.php" onsubmit="return validateForm()" method="POST" id="signupform"> 
    Name <input type="text" class="text" style="width: 150px;" name="name" id="yourname"/> 
    Email <input type="text" class="text" style="width: 150px;" name="email" id="youremail" value="" />  
</form> 

 

$('#signupform').submit(function() { 
    if ($('#yourname').val().length == 0) { 
     alert('no name'); 
     return false; 
    } 

    if ($('#youremail').val().indexOf('@') == -1) { 
     alert('bad email'); 
     return false; 
    } 

    return true; 
}); 

jQueryのも、あなたのためにこれらのハード多くのことを行います素晴らしいvalidation pluginを持っています。

jQuery以外のソリューションが必要な場合は、私もそれを手助けすることができますが、これはおそらくより良い方法だと思います。私はWordpressがあなたの検証を止めていないことを保証することができます。何かがあれば、スクリプトエラーがあるかもしれません。これは、ブラウザの開発者ツールを呼び出すことで確認できます。たとえばFFのFirebug、ChromeまたはIE9のF12を押します。

私はあなたの質問を読み直しました。あなたの作業コードを掲載したものであり、動作していないコードではないようです。動作していないコードを見ずにデバッグするのは難しいです。ここで私はあなたのjavascriptソリューションの空のフィールドをチェックする方法です。

<script type="text/javascript"> 
function validateForm() { 
    var y=document.forms["newslettersignup"]["d"].value; //dont use brackets in names or id's 
    var x=document.forms["newslettersignup"]["bm_email"].value; 
    var atpos=x.indexOf("@"); 
    var dotpos=x.lastIndexOf("."); 
    if (x.length == 0 || y.length == 0) { return false; }  

    if (atpos<1 || dotpos<atpos+2 || dotpos+1>=x.length) 
    { 
    alert("Please enter a valid e-mail address"); 
    return false; 
    } 
    } 
</script>